前端部署至Firebase、后端部署至Heroku后配置跨域仍报CORS策略错误求助

最高发的根因：Heroku端口与服务启动配置错误 #

• 你现在的代码硬编码了app.listen(5000)，但Heroku平台不会给应用固定分配5000端口，会通过环境变量process.env.PORT动态指定对外服务的端口。如果硬编码端口，应用部署后会因为端口不匹配根本没正常对外提供服务，前端请求打到的是Heroku的默认错误页，这类错误的浏览器提示会被直接归类为CORS跨域问题。
• 正确的端口监听写法：

  const port = process.env.PORT || 5000
  app.listen(port, () => {
    console.log(`服务启动完成，运行在端口 ${port}`)
  })
  

• 另外检查MongoDB连接串，你代码里的retryWrites=true&w=majority是HTML转义后的格式，实际运行代码里要把&改成&，不然会导致数据库连接失败，服务启动直接报错，所有请求都会返回异常，很容易被误判成跨域问题。

跨域配置的常见问题 #

1. 中间件顺序与逻辑问题 #

• 你自己写的allowCrossDomain中间件里，处理OPTIONS预检请求时用了res.send(200)，这种写法会导致响应头不完整，预检请求无法通过浏览器校验。正确的写法是替换成res.sendStatus(204)，而且要确保这个中间件挂载在所有业务路由、body解析中间件之前，不然预检请求的响应会被后续逻辑拦截。
• 不建议自己手写跨域中间件，直接用官方cors包的时候不要直接用空配置的app.use(cors())，如果前端请求带了Authorization这类自定义请求头，或者开启了带凭证的请求模式，通配符*的源配置是会被浏览器直接拦截的。
• 稳妥的cors配置示例：

  const cors = require('cors')
  // 放在所有路由挂载之前
  app.use(cors({
    // 替换成你实际的Firebase部署域名和本地开发地址
    origin: ["https://你的firebase项目.web.app", "http://localhost:3000"],
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
    credentials: true
  }))
  

• 注意：如果开启了credentials: true，Access-Control-Allow-Origin绝对不能设置成*，必须明确返回前端的具体域名，不然浏览器会直接阻断请求。

2. 重定向拦截预检请求 #

• 如果后端配置了强制HTTPS跳转的逻辑，要把所有OPTIONS类型的请求直接放行，不做任何3xx重定向。浏览器的预检请求遇到重定向时是不会携带跨域相关头信息的，会直接触发CORS报错。

快速验证方法 #

• 后端部署完成后，直接用浏览器访问任意后端接口，打开开发者工具的Network面板检查响应头：
  • 如果完全没有Access-Control-*开头的响应头，说明服务根本没正常启动（大概率是端口、数据库连接配置错误）
  • 如果响应头里的允许源和你前端的部署域名不匹配，说明跨域配置没有生效
  • 如果OPTIONS预检请求返回了4xx/5xx状态码，说明预检逻辑被后续中间件拦截了

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