部署Node.js+Express服务至Heroku后遭遇CORS预请求失败问题求助

看起来你的问题出在几个核心点上：CORS配置冲突、OPTIONS预检请求未被正确响应，还有Heroku端口设置不符合平台要求，我来一步步帮你解决：

1. 先修复Heroku端口配置 #

Heroku会为应用分配动态端口，不能硬编码3030，必须读取平台提供的环境变量端口：

app.listen(process.env.PORT || 3030, () => {
  console.log('server is running');
});

这是基础前提，端口配置错误会导致服务在Heroku上无法正常启动，间接引发预检请求返回错误状态。

2. 移除重复CORS配置，避免头信息冲突 #

你同时使用了cors()中间件和手动设置CORS头的自定义中间件，这会导致响应头混乱，反而触发CORS规则校验失败。直接删掉手动设置头的代码，只保留cors()并按需配置：

import './db/mongoose';
import HttpError from './model/http-error';
import cors from 'cors';
import { Request, Response, NextFunction } from 'express'; // 记得导入express的类型
import authRoutes from './routes/auth.router';
import productRouter from './routes/product.router';

const app = express();

// 仅保留cors中间件，它会自动处理所有CORS逻辑，包括OPTIONS预检
app.use(cors({
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept', 'Authorization', 'AuthorizationRefresh', 'user'],
  methods: ['OPTIONS', 'GET', 'POST', 'PATCH', 'DELETE']
}));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// 删掉原来手动设置CORS头的那段中间件代码

app.use('/auth', authRoutes);
app.use('/products', productRouter);

app.use((req, res, next) => {
  throw new HttpError('couldnt find this route', 404);
});

app.use((error: any, req: Request, res: Response, next: NextFunction) => {
  if (res.headersSent) {
    return next(error);
  }
  res.status(error.code || 500);
  res.json({ message: error.message || 'an unknown error occurred' });
});

app.listen(process.env.PORT || 3030, () => {
  console.log('server is running');
});

cors()包会自动处理OPTIONS预检请求，返回符合要求的200/204状态，这正是你当前缺失的关键响应。

3. 额外保障：确保OPTIONS请求不被404中间件拦截 #

虽然cors()放在最前面会优先处理OPTIONS请求，但如果还是有问题，可以专门给所有路由的OPTIONS请求加兜底处理：

// 放在cors中间件之后、路由之前
app.options('*', cors());

最后：重新部署到Heroku #

修改完成后，提交代码并重新部署：

git add .
git commit -m "fix cors and heroku port issues"
git push heroku main

这样调整后，预检请求会被cors()包正确响应，CORS头也不会出现冲突，端口也符合Heroku的要求，应该就能解决你遇到的错误了。

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