配置Express CORS中间件后React调用外部API仍报CORS错误如何解决

可能的原因及对应解决方法 #

• 1. 中间件加载顺序错误 #

cors中间件必须放在所有路由定义、以及express.json()等其他中间件的最前面，否则请求先匹配到路由返回响应时，还没经过cors中间件的处理，自然不会携带CORS相关响应头。你当前贴出的server.js里cors配置在最前，但若实际代码里路由写在了app.use(cors())之前，就会触发该问题。

• 2. 前端直接请求第三方外部API #

CORS限制是目标接口的服务器返回的响应头决定的，如果你前端fetch的api_url是第三方外部接口的地址，你给自己的Express服务配置CORS完全不会生效。这种情况你需要用Express做代理转发：

1. 前端请求你自己的Express接口地址，比如http://localhost:5000/proxy/xxx
2. Express侧定义对应路由，在路由逻辑里用axios或者node-fetch请求第三方外部API，拿到结果后再返回给前端
   后端请求不存在CORS限制，该方案可以彻底解决跨域调用外部API的问题。

• 3. 未处理预检OPTIONS请求 #

如果你的请求满足以下任意一个条件，浏览器会先发送OPTIONS预检请求：

• 使用了PUT/DELETE/PATCH等非简单请求方法
• 请求头带了自定义字段
• Content-Type值不属于application/x-www-form-urlencoded、multipart/form-data、text/plain（比如传JSON时的application/json就属于触发预检的情况）
  你可以在server.js里手动添加OPTIONS请求的处理，确保预检请求能正确返回CORS头：

app.options('*', cors())

该行代码要放在所有路由定义之前。

• 4. 未定义对应接口路由返回404 #

你当前贴出的server.js只有CORS配置和服务启动逻辑，没有定义任何接口路由。如果你请求的接口路径不存在，Express会默认返回404响应，该响应默认不会携带CORS头，浏览器会优先报CORS错误而非404错误，很容易误导排查方向。请补充对应接口的路由定义示例：

// 示例接口
app.get('/your/api/path', (req, res) => {
  res.json({code: 200, msg: 'success'})
})

• 5. 前端请求地址填写错误 #

如果api_url漏写协议头（比如直接写localhost:5000/xxx而非http://localhost:5000/xxx）、端口填写错误、路径拼写错误，都会触发和上一条一样的404无CORS头问题，请核对请求地址是否正确。

临时开发替代方案 #

如果你是用create-react-app搭建的React项目，可以直接在React项目的package.json中添加一行配置：

"proxy": "http://localhost:5000"

配置后前端请求接口时直接写路径/your/api/path即可，不需要写完整地址，开发服务器会自动把请求代理到5000端口的Express服务，不需要额外配置CORS。

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