使用Express部署React Build静态文件夹时普通浏览器异常问题

我使用Express.js部署React的build文件夹，代码如下：

app.use(express.static("build"));

针对其他请求，配置了通配路由：

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

遇到的问题：

• 非无痕模式下，index.html请求静态CSS/JS文件时，返回的仍是index.html
• 无痕模式下一切正常
• 注释掉app.get("*")后，控制台报错：静态资源（如static/js/main.xxx.js、static/css/main.xxx.css）返回404 Not Found

1. 修正静态资源路径为绝对路径 #

避免相对路径的歧义，用绝对路径指定build文件夹：

const path = require('path');
// 优先匹配静态资源
app.use(express.static(path.join(__dirname, 'build')));

2. 解决浏览器缓存问题 #

非无痕模式的异常是因为浏览器缓存了旧的路由匹配规则，导致静态资源请求被错误导向通配路由。可以通过两种方式处理：

• 方式一：配置静态资源缓存规则
  给静态资源添加缓存控制，避免缓存冲突：

app.use(express.static(path.join(__dirname, 'build'), {
  maxAge: '1h', // 按需调整缓存时长
  etag: false // 关闭etag防止缓存校验异常
}));

• 方式二：强制刷新浏览器缓存
  按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除旧缓存。

3. 确认路由顺序正确性 #

必须保证express.static的配置在app.get("*")之前，这样Express会先匹配静态资源请求，只有当资源不存在时才会返回index.html（单页应用的标准路由逻辑）。

4. 修正React打包的路径配置 #

在React项目的package.json中添加homepage字段，确保打包后的静态资源路径正确：

"homepage": ".",

添加后重新执行npm run build，再部署新的build文件夹。

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