React应用请求部署后的Express服务器出现CORS错误如何修复

核心排查方向按优先级排序 #

• 中间件加载顺序错误（最高发）
  你当前代码的中间件顺序存在问题：bodyParser.json被放在了全局cors()中间件之前，OPTIONS预检请求可能被前置的解析中间件提前拦截响应，根本没走到CORS头注入逻辑。
  所有CORS相关配置必须放在所有业务中间件、路由注册逻辑的最顶部，修正后的基础配置如下：

  // CORS配置必须放在最开头
  app.use(cors());
  app.options("*", cors());
  
  // 再注册其他解析类中间件
  app.use(bodyParser.json({ limit: "30mb", extended: true }));
  
  // 最后注册路由
  app.get("/", (req, res) => {
    res.send("Food Tracker Server");
  });
  

  如果配置了credentials: true（允许请求带Cookie），不能使用默认的origin: "*"规则，必须明确指定允许的前端线上域名，否则浏览器会直接拦截响应。

• 部署层反向代理/网关拦截OPTIONS请求
  本地运行正常、部署后失效的场景里，80%的问题出在部署层，和Express代码无关：如果你在Express前面套了Nginx、CDN、云API网关、WAF、Serverless平台边缘规则，这些组件默认可能拦截OPTIONS方法，直接返回不带CORS头的响应，请求根本没有转发到你的Express进程。
  排查方法：登录服务器直接用curl请求Express服务的本地端口，模拟预检请求：

  curl -i -X OPTIONS http://127.0.0.1:你的服务端口/测试接口路径 \
    -H "Origin: 你的前端线上完整域名" \
    -H "Access-Control-Request-Method: GET"
  

  如果返回的响应头里包含Access-Control-Allow-Origin字段，说明Express侧配置正常，问题出在上层代理/网关，需要修改代理规则：允许OPTIONS请求透传到Express，或者直接在代理层配置统一的CORS响应头。

• 路由/CORS规则匹配异常
  检查以下场景：

  • 如果你做了路由拆分用了express.Router()，确认CORS中间件是挂载在根app实例上，而非某个子路由组下，导致部分路径没有命中CORS逻辑
  • 如果给CORS配置了源白名单，检查前端线上域名的协议（http/https）、www前缀、端口号是否完全匹配，多一个字符都会导致匹配失败
  • 检查是否有自定义中间件、全局错误处理逻辑在CORS头注入之前就提前返回了响应（比如鉴权中间件拦截OPTIONS请求返回401/403），这类提前返回的响应不会自动带上CORS头。

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