在Heroku部署MERN项目时出现GET 502 Bad Gateway favicon.ico错误

根因定位 #

• 初始加载正常说明前端静态资源托管本身没有问题，几秒后白屏是页面渲染过程中触发了未捕获的JS错误，90%以上的概率是生产环境下前后端接口路径不匹配，或者环境变量配置错误导致。

具体排查修复点 #

1. 检查后端静态资源托管逻辑
   在后端入口文件（通常是server.js/app.js）中，所有API路由定义完成后，必须添加生产环境静态资源托管规则，代码如下：

const path = require('path')
// 所有你的API路由写在这前面，比如app.use('/api/xxx', xxxRouter)

if (process.env.NODE_ENV === 'production') {
  // 托管前端build目录的静态资源
  app.use(express.static(path.join(__dirname, '../client/build')))
  // 所有未匹配到API的请求，返回前端index.html，交给前端路由处理
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html'))
  })
}

注意路径要和你项目的目录结构匹配，如果你前端目录名字不是client，或者层级不对，要对应修改路径。

2. 检查前端接口请求配置

• 前端package.json里的proxy字段仅在本地开发环境生效，生产环境不会生效，不要依赖这个字段做跨域处理。
• 前端所有接口请求不要写死http://localhost:5000这类本地地址前缀，生产环境直接用/api/xxx的相对路径即可，或者根据环境变量动态切换baseURL：

const baseURL = process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:5000/api'

3. 检查Heroku环境变量配置

• 确认NODE_ENV变量已经设置为production
• 确认MONGODB_URI等敏感配置的拼写完全正确，没有多余的空格、换行符
• 不要在前端代码里直接引用后端的环境变量，只有前缀带REACT_APP_的变量才会被create-react-app打包注入到前端代码中

验证方法 #

• 本地先做生产环境模拟测试：先在前端目录执行npm run build，再启动后端服务，直接访问后端监听的端口（比如localhost:5000），如果本地也复现几秒白屏的问题，直接在本地调试修复，不用反复推送代码到Heroku。
• 修复后推送代码到仓库触发Heroku自动部署，部署完成后清空浏览器缓存再访问，打开浏览器控制台查看Console和Network标签，确认没有报错即可。
• 如果问题仍然存在，可以在本地安装Heroku CLI后执行heroku logs --tail查看实时运行日志，定位具体的报错信息。

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