我在从前端应用程序向Ngrok上托管的后端API发出Axios请求时遇到CORS（跨源资源共享）问题。我收到的错误消息是“Access to XMLHttpRequest at 'https：//fe39-156-220-22-73.ngrok-free.app/api/announcements' from origin 'https：9797-156-220-22-73.ngrok-free.app' has been blocked by CORS policy：请求的资源上不存在'Access-Control-Allow-Origin'标头。”
下面是我的api.js代码：

import axios from 'axios';

const baseURL = 'https://fe39-156-220-22-73.ngrok-free.app'; // Replace with your base URL

const axiosInstance = axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': 'https://9797-156-220-22-73.ngrok-free.app',
  },
});

下面是我的函数：

const [announcements, setAnnouncements] = useState()
    const [spin, setSpin] = useState(true)

    const fetchAnnouncements = async () => {

      try{
          const { data } = await axios.get(`/api/announcements`)
          if(data) setSpin(false)
          setAnnouncements(data.json)

      }catch(err){
          console.log(err)
      }
   
  }

虽然这段代码运行良好idk为什么：

export async function getServerSideProps() {
  try {
    // Use the axios instance directly from your api.js file
    const { data } = await axios.get('/api/course');
    return {
      props: {
        courses: data,
      },
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return {
      props: {
        courses: [], // Return an empty array or handle the error accordingly
      },
    };
  }
}

当我尝试GET请求与 Postman 它的工作完美的罚款。
我已经检查了后端服务器，它运行正常。当我使用Postman向后端API发出请求时，一切正常，我收到了预期的数据。但是，CORS问题仅在从托管在"https：//www.example.com"上的前端应用程序9797-156-220-22-73.ngrok-free.app向位于“https：//www.example.com”的Ngrok托管的后端APIfe39-156-220-22-73.ngrok-free.app。
我已经尝试使用app.use（cors（））在我的后端添加必要的CORS头，并且我还尝试直接在我的Axios配置中设置Access-Control-Allow-Origin头，如上面的代码所示，但问题仍然存在。
我将非常感谢任何关于如何解决这个CORS问题的见解或建议，并成功地将Axios请求从我的前端发送到Ngrok托管的后端API。提前感谢您的帮助！
Error in console
响应头内容类型也是text/html，应该是application/json
response headers