React项目使用Axios调用外部API报CORS错误，仅前端/浏览器端能否解决？

报错详情 #

Access to XMLHttpRequest at 'https://externaldomain.com' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

核心说明 #

CORS是浏览器内置的同源安全防护机制，所有主流浏览器默认强制执行，正常使用场景下前端代码层面没有权限直接关闭或绕过该限制，不存在完全不依赖额外服务/配置的纯前端生产级解决方案，但可以通过以下方式在不修改第三方API配置的前提下解决问题。

开发阶段解决方案 #

方案1：配置前端脚手架代理（最推荐） #

开发阶段的CORS问题可以通过本地开发服务器的代理功能直接解决：

• 如果你用的是Create React App，直接在package.json中添加字段：

  "proxy": "https://externaldomain.com"
  

  后续Axios请求直接写接口路径即可，不要带第三方域名，开发服务器会自动转发请求，不会触发CORS校验。
• 如果你用的是Vite，在vite.config.js中添加代理配置：

  export default {
    server: {
      proxy: {
        '/api': {
          target: 'https://externaldomain.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  }
  

  调用接口时请求地址前缀加/api即可，比如原来的https://externaldomain.com/getUser改成/api/getUser。

方案2：临时关闭浏览器CORS校验（仅本地调试用） #

可以手动启动一个关闭了web安全策略的Chrome窗口用于调试，该窗口不会校验CORS规则：

• Windows：右键Chrome快捷方式，选择「属性」，在「目标」输入框的内容末尾添加 --disable-web-security --user-data-dir="C:\ChromeDevTemp"，保存后双击快捷方式打开即可。
• Mac：终端执行命令open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/你的用户名/ChromeDevTemp

生产环境解决方案 #

方案1：自建反向代理服务（最稳定） #

自己搭建一个后端中转服务，前端先请求你自己的后端服务，你的后端再转发请求到第三方API，后端之间的HTTP请求不存在CORS限制，你可以在自己的后端服务上配置允许前端域名跨域即可。

方案2：使用CORS代理服务（仅测试用） #

测试阶段可以在第三方API地址前拼接公开CORS代理的前缀，代理服务会自动给返回结果加上CORS头，注意该方案不推荐生产环境使用，存在数据泄露、服务不稳定的风险。

方案3：使用JSONP（仅GET请求可用） #

如果第三方API支持JSONP格式返回，且你的请求只有GET类型，可以用专门的JSONP请求库调用接口，JSONP不受CORS规则限制，但仅支持GET请求，局限性较高。

内容的提问来源于stack exchange，提问作者Miraii App