部署在Heroku的MERN应用仍出现CORS错误，求解决方案

核心修复：正确使用cors中间件 #

你已经安装了cors依赖，但当前代码里自定义的CORS头中间件和cors包的配置冲突，导致Heroku上的响应头未正确设置。直接用cors包的官方配置即可解决问题，步骤如下：

1. 删除你当前写的自定义CORS中间件（即那段app.use((req, res, next) => {...})代码）
2. 替换为以下配置，明确指定允许的源（比通配符*更安全，也避免credentials冲突）：

const path = require("path");
const express = require("express");
const bodyParser = require("body-parser");
const logger = require("morgan");
const cors = require("cors");
const app = express();
const publicPath = path.join(__dirname, "frontend/perfumery2_client/build");
const oilRoutes = require("./routes/api/oils");
const connectDB = require("./config/db");

// 配置CORS选项
const corsOptions = {
  // 允许本地开发环境和你的前端生产环境（如果有部署的话）
  origin: ["http://localhost:3000", "https://你的前端Heroku域名.com"],
  credentials: true,
  methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
  allowedHeaders: ["Origin", "X-Requested-With", "Content-Type", "Accept", "Authorization"]
};

// 必须在所有路由之前使用cors中间件
app.use(cors(corsOptions));

// 其他中间件和路由
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(logger("dev"));
app.use("/api/oils", oilRoutes);

// 连接数据库
connectDB();

// 监听端口（Heroku会动态分配端口，必须用process.env.PORT）
const port = process.env.PORT || 8082;
app.listen(port, () => console.log(`Server is running on port ${port}`));

排查常见坑点 #

• 中间件顺序错误：cors中间件必须放在所有路由、body-parser等中间件之前，否则路由请求不会经过CORS配置处理。
• 重复设置响应头：你之前的代码里重复写了两次res.header("Access-Control-Allow-Origin", "*")，自定义头和cors包的配置会互相覆盖，导致Heroku上的响应头不生效。
• Heroku端口配置：必须使用process.env.PORT，不能硬编码端口号，Heroku会在部署时动态分配端口。
• OPTIONS请求重复处理：cors包已经自动处理OPTIONS预检请求，不需要再自定义app.options('/*', ...)路由，重复处理会导致响应头混乱。

关于Heroku代理的疑问 #

不需要额外创建Heroku代理。只要后端正确配置CORS，本地前端就能正常访问Heroku上的API。如果后续你把前端也部署到Heroku，且和后端同域名（比如用后端托管前端静态文件），那可以完全避免跨域问题，此时也不需要代理。

验证配置是否生效 #

部署到Heroku后，用curl命令测试响应头：

curl -H "Origin: http://localhost:3000" -I https://perf2-api.herokuapp.com/oils/6411f65e4ed9306f3e4921bf

如果响应头中包含Access-Control-Allow-Origin: http://localhost:3000，说明配置生效。

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