React调用API时出现No 'Access-Control-Allow-Origin' CORS错误如何解决？

• 配置的代理未生效：package.json 中的 proxy 字段仅对相对路径的请求生效，你当前请求直接写了完整的远端API地址 https://example.com/api/checkout/products/，浏览器会直接向该地址发起跨域请求，不会走本地开发服务的代理逻辑。
• 源地址不在CORS白名单内：你本地前端服务运行在 http://localhost:3000，而对方API开放的CORS允许源只有 http://localhost:1229，3000端口不在白名单范围内，因此被浏览器CORS策略拦截。
• proxy配置逻辑错误：你之前将proxy值设为 http://localhost:1229 不符合代理配置逻辑，proxy字段需要填写的是你要请求的远端API的根地址，不是CORS白名单里的本地地址。

方案1：通过本地开发服务代理转发（最推荐，无需修改后端配置） #

• 第一步：修改请求地址为相对路径，将代码中的
  const apiLink = 'https://example.com/api/checkout/products/'
  修改为
  const apiLink = '/api/checkout/products/'
• 第二步：修改package.json中的proxy配置为远端API的根地址：
  "proxy": "https://example.com"
• 原理：修改后请求会先发送到你本地的3000开发服务，由开发服务代理转发到远端API，服务端发起的请求不存在CORS限制，返回结果再回传给前端，即可避免跨域报错。

方案2：修改本地服务端口匹配CORS白名单 #

• 不想走代理的情况下，可以直接把本地前端服务的启动端口修改为1229，和对方开放的CORS白名单地址完全匹配。
• 以create-react-app项目为例，修改package.json的scripts启动命令：
  • Windows环境："start": "set PORT=1229 && react-scripts start"
  • Mac/Linux环境："start": "PORT=1229 react-scripts start"
• 重启服务后前端运行在 http://localhost:1229，直接请求全路径API即可正常返回。

临时调试方案 #

如果仅需要临时测试接口是否能正常请求，可按照报错提示在fetch配置中添加 mode: 'no-cors'，但该模式下无法读取接口返回的具体数据，仅能判断请求是否发送成功，不适合常规开发场景使用。

注意：no-cors 模式仅适用于不需要处理响应内容的场景（如行为上报等），业务开发不建议使用该配置。

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