调用第三方API时如何解决CORS预检被拦截问题？

首先看你代码里的明显错误：mode: 'cors'被错误地放在了headers配置里，它应该是fetch选项的顶层属性，不属于请求头的一部分。修正后的代码如下：

await fetch(apiURL, {
    method: "POST",
    body: JSON.stringify(body),
    headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
    },
    mode: 'cors' // 移到顶层配置，且这是fetch默认值，可省略
})
.then((response) => response.json()) // 原代码未转换响应体，需补充这一步
.then((responseJson) => {
    console.log(responseJson)
})
.catch(err => console.error('请求失败:', err))

但修正配置后大概率仍会遇到CORS问题，因为预请求（OPTIONS）被阻塞的核心原因是第三方API服务器未配置允许你的前端域名的CORS响应头。以下是可行解决方案：

• 若第三方API支持CORS配置：联系API提供者，让他们在服务器响应中添加Access-Control-Allow-Origin（设为你的前端域名或*）、Access-Control-Allow-Methods（包含POST）、Access-Control-Allow-Headers（包含Content-Type等你用到的请求头）这些响应头。
• 若第三方API不支持CORS：必须通过代理中转请求。在React项目中可这样操作：
  1. 安装http-proxy-middleware依赖
  2. 在项目根目录创建src/setupProxy.js，添加配置（替换为实际第三方API地址）：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       app.use(
         '/api-proxy',
         createProxyMiddleware({
           target: 'https://第三方API域名',
           changeOrigin: true,
           pathRewrite: { '^/api-proxy': '' } // 按需重写路径
         })
       );
     };
     

  3. 前端请求时将apiURL改为/api-proxy/具体接口路径，请求会先经过React开发服务器中转，避开浏览器的CORS限制。

内容的提问来源于stack exchange，提问作者Redcrix Technologies