在Heroku部署React App搭配Netlify时出现CORS错误如何解决

1 确认跨域请求的目标源 #

首先打开浏览器控制台「网络」标签，筛选报错的跨域请求，查看请求URL：

• 如果URL是Netlify域名前缀（如https://xxx.netlify.app/api/xxx），说明Netlify代理重定向规则未生效
• 如果URL是Heroku后端域名前缀（如https://xxx.herokuapp.com/xxx），说明后端CORS配置存在问题

2 对应场景修复方案 #

2.1 后端CORS配置失效修复 #

首先确认express的cors中间件挂载顺序必须早于所有路由定义，错误的挂载顺序会导致配置不生效，正确配置参考：

const express = require('express')
const cors = require('cors')
const app = express()

// cors配置必须放在路由注册之前
app.use(cors({
  // 显式指定允许的前端域名，不要写通配符*，带cookie请求需额外开启credentials: true
  origin: ['https://你的Netlify域名', 'http://localhost:3000'],
  credentials: true
}))

// 后续再注册路由
app.get('/api/xxx', (req, res) => {
  res.json({code: 0})
})

app.listen(process.env.PORT || 5000)

配置修改后重启Heroku dyno，避免缓存旧版本代码。

2.2 Netlify重定向规则失效修复 #

确认netlify.toml放在项目根目录，且构建后会被打包到产物的根路径下，规则参考写法：

[[redirects]]
  from = "/api/*"
  to = "https://你的Heroku后端地址/api/:splat"
  status = 200
  force = true

不要使用React项目静态目录下的_redirects文件配置，优先级低于netlify.toml容易被忽略。

3 验证配置效果 #

清空浏览器缓存后硬刷新页面，重新发起请求，查看网络面板的响应头是否存在Access-Control-Allow-Origin字段，且值为你的前端域名即可确认配置生效。

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