NodeJS Express项目部署Heroku后fetch请求报Failed to fetch如何解决

• 1. 服务端CORS中间件顺序错误
     Express中间件按注册顺序执行，你当前将CORS头配置放在了路由注册之后，请求进入路由时还未添加跨域头，会触发跨域拦截导致请求失败。需要将CORS配置移动到所有路由注册之前，同时补充OPTIONS预检请求的处理逻辑：

// 优先注册CORS中间件
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  // 处理预检请求直接返回成功状态
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// 再注册业务路由
var listingRouter = require('./routes/listing');
app.use('/listing', listingRouter);

• 2. 端口配置不符合Heroku规则
     Heroku会自动分配运行端口，不能硬编码本地端口，需要读取环境变量中的PORT值：

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`App running on port ${port}`)
})

• 3. 客户端请求地址配置错误
     本地开发时<SERVER_URL>为本地地址，部署后需要替换为你的Heroku后端服务域名，注意必须使用https协议（Heroku默认提供https服务）。如果前后端部署在同一个Heroku服务下，直接使用相对路径即可避免配置错误：

// 同域部署直接写相对路径
let url="/listing/add_listing";
// 跨域部署写完整Heroku域名
// let url="https://你的Heroku应用名称.herokuapp.com/listing/add_listing";

• 4. 数据库连接限制
     如果你使用MongoDB Atlas作为数据库，需要在Atlas控制台将IP白名单设置为0.0.0.0/0，否则Heroku的动态IP会被拦截，无法连接数据库导致请求超时失败。同时MongoDB连接串不要硬编码在代码中，需要配置到Heroku的环境变量中读取。
• 5. 日志排查
     如果修改后仍有问题，可以通过两个渠道定位错误：
  • 浏览器F12打开开发者工具，查看「网络」标签中对应请求的状态码、报错信息，区分是跨域、404、500还是超时错误
  • 本地安装Heroku CLI后执行heroku logs --tail查看服务端运行日志，确认服务是否正常启动、请求是否到达服务端、是否有数据库相关报错

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