Express+Heroku部署后CORS跨域问题求助：本地正常线上报错

针对本地运行正常、Heroku部署后出现No 'Access-Control-Allow-Origin' header is present的CORS错误，结合你的代码给出以下排查和修复方案：

1. 确认CORS依赖已正确部署 #

检查package.json的dependencies字段，确保cors包在其中（而非仅在devDependencies）。Heroku部署时只会安装dependencies中的包，若cors仅在开发依赖中，部署后服务会缺失该依赖，导致CORS中间件失效。

2. 调整CORS中间件加载顺序 #

将CORS中间件移至所有路由和其他中间件之前，确保它能处理所有请求的跨域头。修改后代码顺序如下：

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

// 信任Heroku反向代理，获取真实客户端Origin
app.set('trust proxy', true);

// 先加载CORS中间件
app.use(cors({
  origin: process.env.CLIENT_URL, // 替换为你的前端部署地址，如https://your-frontend.herokuapp.com
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// 显式处理OPTIONS预检请求
app.options('*', cors());

// 加载其他中间件和路由
app.use(express.json());
app.use(AUTH, authRoute);
app.use(USERS, userRoute);
app.use(PRODUCTS, productRoute);
app.use(CARTS, cartRoute);
app.use(ORDERS, orderRoute);
app.use(CHECKOUT, stripeRoute);

// 数据库连接逻辑
mongoose.connect(process.env.MONGO_URL)
.then(() => {
    console.log('Connected to database!');
})
.catch(() => {
    console.log('DB Connection failed!');
});

app.get('/', (req, res) => {
    res.send('Hello to Greensai Updated!');
});

app.listen(process.env.PORT || 5000, () => {
  console.log(`Server started on port ${process.env.PORT || 5000}`);
});

3. 配置Heroku环境变量 #

在Heroku后台的「Settings」->「Config Vars」中，添加CLIENT_URL变量，值为你的前端部署地址（需精确匹配，比如https://your-frontend-app.herokuapp.com）。

排查小贴士 #

• 用浏览器开发者工具「Network」面板查看请求响应头，确认是否存在Access-Control-Allow-Origin字段，若没有说明CORS中间件未生效。
• 运行heroku logs --tail查看Heroku日志，检查是否有cors依赖缺失或相关错误提示。

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