MERN栈部署后刷新页面报错/空白问题求助

问题背景 #

此前已解决过MERN应用中使用res.sendFile刷新报错的问题，但现在该问题复现：即使沿用之前的方案并配置了express.static，刷新特定页面时仍会报错。

项目结构 #

root
|--- client
|--- model
|--- route
|--- server
|--- index.js
|--- package.json

当前配置代码 #

index.js 相关代码 #

const __dirname = path.resolve()
app.use(express.static(path.join(__dirname, '/client/build')));
app.get("*",(req,res) => {
    etag: false
  res.sendFile(path.join(__dirname, '/client/build/index.html'));
})

package.json 配置 #

{
  "name": "tua_thesis_rework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "npm install && cd client && npm install && npm run build",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@mui/x-data-grid": "^5.17.17",
    "cors": "^2.8.5",
    "crypto-js": "^4.1.1",
    "express": "^4.18.2",
    "jsonwebtoken": "^9.0.0",
    "mongodb": "^4.13.0",
    "mongoose": "^6.8.2",
    "nodemon": "^2.0.20"
  }
}

排查与解决建议 #

• 修复etag配置语法错误
  当前代码中etag: false的写法无效，它未被包含在响应配置对象中，正确写法如下：

  app.get("*",(req,res) => {
    res.sendFile(path.join(__dirname, '/client/build/index.html'), {
      etag: false
    });
  })
  

  错误写法会导致缓存相关配置失效，进而引发刷新问题。

• 确认静态资源路径正确性
  打印验证静态资源路径是否指向正确的构建目录：

  const staticPath = path.join(__dirname, '/client/build');
  console.log('静态资源路径:', staticPath);
  app.use(express.static(staticPath));
  

  同时检查client/build目录是否存在且包含完整的前端构建产物。

• 调整路由定义顺序
  确保API路由在静态资源配置和通配路由之前定义，避免API请求被通配路由拦截返回index.html：

  // 先定义API路由
  app.use('/api', require('./route/api'));
  // 再配置静态资源
  app.use(express.static(path.join(__dirname, '/client/build')));
  // 最后配置通配路由
  app.get("*",(req,res) => {
    res.sendFile(path.join(__dirname, '/client/build/index.html'), { etag: false });
  })
  

• 检查前端路由配置
  若前端使用BrowserRouter，需确认其base路径与后端配置匹配；若使用HashRouter则不会出现刷新问题，但需根据项目需求选择。

• 重新构建前端产物
  执行npm run build重新构建前端，确保构建过程无报错，client/build目录下的文件为最新版本。

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