MERN应用刷新报404错误，如何正确使用res.sendFile？

问题根源 #

这是单页应用（SPA）的典型问题：正常跳转页面时是前端路由在处理逻辑，但刷新页面时浏览器会直接向服务器请求当前URL（比如/user/xxx），而你的前端是单独部署的静态站点，后端也没配置对应路由，所以返回404。你之前写的res.sendFile代码无效，核心原因是前后端分属不同仓库，后端部署环境里根本不存在前端的build目录，自然找不到index.html文件。

最优解决方案（前端静态站点配置） #

直接在前端部署层面解决，无需修改后端代码：

• 如果你用React做前端（MERN栈的前端部分），确保路由组件用的是BrowserRouter（而非HashRouter）。
• 在前端项目的public目录下新建_redirects文件，内容仅一行：

  /* /index.html 200
  

• 将这个文件提交到前端GitHub仓库，重新部署前端静态站点到Render。
• 另外，在Render的前端站点设置里，找到Custom 404 Page选项，设置为/index.html（部分Render版本会自动识别_redirects文件，此步骤可省略）。

配置完成后，任何不存在的请求路径都会被指向前端的index.html，由前端路由接管处理，刷新动态路由页面就不会再出现404错误。

备选方案（后端处理，不推荐） #

如果一定要通过后端解决，必须让后端能访问到前端的build产物：

• 把前端打包后的build目录复制到后端项目的某个目录下（比如public），然后修改后端代码：

  const path = require('path');
  app.use(express.static(path.join(__dirname, 'public')));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
  });
  

• 但这种方法需要每次前端更新都重新打包并同步到后端仓库，维护成本高，远不如前端配置方案便捷。

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