MERN应用本地运行正常但部署到Heroku后出现故障如何解决

问题核心原因 #

setupProxy.js 是 React 开发环境专属的代理配置，仅在本地运行 npm start 启动开发服务器时生效，项目打包构建为生产版本后，该配置会完全失效。你配置的代理目标 http://localhost:5000 在 Heroku 线上环境不存在，所有发往 /api 路径的请求都会报错，这就是本地正常线上出问题的核心原因。

可行解决方案 #

方案1：同域名部署前后端（推荐，适配Heroku单dyno部署）

大部分MERN项目部署Heroku都是把前端静态文件托管给后端Express服务，不需要额外代理：

• 首先在后端入口文件（一般为server.js）中添加静态文件托管逻辑，放在所有后端路由配置的最后：

const path = require('path');
// 生产环境托管React静态文件
if (process.env.NODE_ENV === 'production') {
  // 路径根据你项目的目录结构调整，这里默认前端代码放在根目录的client文件夹下
  app.use(express.static(path.join(__dirname, './client/build')));
  // 所有非API路由直接返回前端入口文件
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './client/build', 'index.html'));
  });
}

• 前端所有API请求直接使用 /api/xxx 格式即可，生产环境和后端同域名，请求会自动匹配到后端服务，不需要额外加域名前缀。
• 可直接删除setupProxy.js文件，本地开发如果要保留代理，直接在前端目录的package.json里加一行"proxy": "http://localhost:5000"即可。
• 在根目录package.json的scripts字段中添加heroku自动构建指令：

"scripts": {
  "start": "node server.js",
  "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}

方案2：前后端分开部署适配方案

如果你是前后端分别部署在两个Heroku dyno上，直接修改前端请求的baseURL即可：

• 前端请求统一配置环境变量判断的前缀：

const baseURL = process.env.NODE_ENV === 'production' 
  ? 'https://你的后端Heroku应用地址.herokuapp.com/api' 
  : '/api';

• 同时在后端配置CORS跨域允许：

const cors = require('cors');
app.use(cors({
  origin: process.env.NODE_ENV === 'production' ? 'https://你的前端Heroku应用地址.herokuapp.com' : 'http://localhost:3000'
}));

排查提示 #

部署完成后如果还有异常，可以通过Heroku CLI执行heroku logs --tail查看实时运行日志，定位具体报错信息。

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