React应用调用Heroku部署的API触发CORS跨域错误问题咨询

报错原因 #

这是典型的跨域资源共享（CORS）限制触发的错误。浏览器同源策略默认禁止前端页面从一个域名（你本地开发的http://localhost:3000）请求另一个域名（Heroku上部署的API域名）的资源，除非目标API的响应头中明确添加了允许跨域访问的相关头信息。你直接在浏览器地址栏访问接口可以正常拿到数据，是因为地址栏直接访问不属于跨域XMLHttpRequest请求场景，不受CORS策略约束。

解决方法 #

方案1：API服务端配置CORS（最推荐，适配所有场景）

根据你开发API使用的后端框架添加CORS支持即可：

• 若为Node.js + Express框架：可直接使用cors中间件，操作如下：
  1. 安装依赖：npm install cors
  2. 在服务端入口代码中引入启用：

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  // 开发阶段可允许所有来源跨域，生产环境建议指定你的React应用实际上线域名
  app.use(cors());
  // 指定允许域名写法示例：app.use(cors({ origin: 'https://你的React应用域名.com' }));
  

• 若为其他后端框架（Python Flask/Django、Java SpringBoot等），都有对应的官方CORS配置方案，搜索对应框架的CORS配置方法操作即可。
  配置完成后重新部署到Heroku，前端请求就不会再触发跨域报错。

方案2：本地开发阶段用React代理中转请求

如果暂时不想修改服务端代码，仅需要本地调试用，可以给React项目配置本地代理：

1. 打开React项目根目录的package.json文件，新增一行配置："proxy": "https://sl-scraper.herokuapp.com"
2. 修改前端请求代码，把完整请求地址改成相对路径：

   // axios请求修改为
   axios.get("/fromstockholm")
   // fetch请求修改为
   fetch("/fromstockholm")
   

该方案原理是本地React开发服务器会把所有非静态资源的请求中转到你配置的proxy地址，等效于同域请求，绕开CORS限制。注意该方案仅适用于本地开发阶段，生产环境部署React应用时需要配合服务端配置或者反向代理才能生效。

方案3：临时测试用CORS代理

如果只是临时测试接口功能，可以在请求地址前加公共CORS代理前缀，修改后的请求地址为https://cors-anywhere.herokuapp.com/https://sl-scraper.herokuapp.com/fromstockholm，该方案仅适合临时调试，不要用在生产环境，公共代理稳定性没有保障。

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