Node.js/Express+React应用部署后CORS错误求助

问题详情 #

报错信息：

Access to XMLHttpRequest at '???.herokuapp.com/api/apod' from origin '???.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

已安装并配置CORS包，server.js配置代码如下：

require('dotenv').config();
const cors = require('cors');
const express = require('express');
const app = require('./app');
const port = process.env.PORT || 10000;

// CORS configuration
const corsOptions = {
origin: '*', // Allow all origins
methods: ["GET", "POST", "PUT", "DELETE", "PATCH"], // Include all HTTP methods your API uses
allowedHeaders: ["Content-Type", "Authorization"]
};


// Middleware
app.use(cors(corsOptions));
app.use(express.json()); 

// Start server
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

补充说明：路由、环境变量、前后端API调用均无问题，本地通过代理可正常运行，首次开发React/Node项目，排查两天未解决。

排查与解决步骤 #

1. 修正CORS中间件加载顺序 #

你当前是先导入./app再挂载CORS中间件，如果./app内部已经定义了路由，会导致路由先于CORS中间件执行，CORS响应头无法被添加。

调整方案：
将CORS配置移到./app文件的最顶部，确保它在所有路由之前加载，示例如下：

// ./app.js
const express = require('express');
const cors = require('cors');
const app = express();

// CORS配置
const corsOptions = {
  origin: '*',
  methods: ["GET", "POST", "PUT", "DELETE", "PATCH"],
  allowedHeaders: ["Content-Type", "Authorization"]
};

// 先挂载CORS中间件
app.use(cors(corsOptions));
app.use(express.json());

// 再挂载路由
const apodRouter = require('./routes/apod');
app.use('/api/apod', apodRouter);

module.exports = app;

2. 添加兜底响应头 #

如果Heroku的反向代理存在头信息篡改问题，可以手动添加全局响应头作为兜底：
在CORS中间件之后添加：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

3. 验证API响应头 #

用curl直接请求Heroku的API地址，检查响应头是否包含Access-Control-Allow-Origin：

curl -I https://???.herokuapp.com/api/apod

如果响应头里没有该字段，说明CORS中间件未生效，回到第一步检查加载顺序。

4. 排查其他拦截中间件 #

确认是否有认证、错误处理等中间件在CORS之前执行且提前返回了响应——这类逻辑会跳过CORS中间件，导致头信息缺失。确保所有可能提前结束请求的代码都在CORS中间件之后。

5. 本地模拟生产环境测试 #

本地关闭前端代理，构建前端生产包（npm run build），将构建后的静态资源挂载到后端，直接启动后端服务测试。如果此时也出现CORS错误，说明问题出在本地代码配置，而非Heroku环境。

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