部署在Heroku的MERN应用页面刷新时加载MongoDB原始数据问题

问题核心原因 #

你看到的刷新后直接展示MongoDB原始JSON的问题，本质是后端路由和前端React客户端路由冲突导致的：
部署到Heroku后，浏览器刷新时会直接向后端发起对应路径的GET请求，你的/document/:id接口和前端页面路由完全一致，后端优先匹配到了API接口，直接返回JSON响应，浏览器没有加载到React应用的HTML、JS资源，自然不会渲染组件。本地开发时由于前端开发服务器会先处理路由、代理API请求，因此不会触发该问题。

解决方案 #

最优方案（推荐，彻底避免路由冲突） #

• 给所有后端API接口统一添加/api前缀，和前端页面路由做明确区分：
  修改后端路由定义，将原app.get('/document/:id', 处理逻辑)调整为app.get('/api/document/:id', 处理逻辑)，所有其他后端接口同步添加该前缀。
• 调整前端请求路径，将axios请求修改为：

  const response = await axios.get(`/api/document/${id}`);
  

• 在后端所有路由定义的最后，添加SPA应用的回退路由，所有未匹配到API的请求统一返回React打包后的入口文件，配置示例：

  const path = require('path');
  // 注意路径要和你项目中React打包后的build文件夹实际路径对应
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
  

• 重新打包前端代码后部署到Heroku即可解决问题。

临时兼容方案（不推荐，易后续出现新的路由冲突） #

如果暂时不想调整API前缀，可以调整后端路由的匹配逻辑，仅当请求头的Accept字段包含application/json时才返回接口数据，否则返回HTML入口，但是该方案后续新增路由容易再次出现冲突，仅适合临时验证使用。

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