React构建后JS文件无法从Node.js服务器获取，返回index.html求助

问题分析 #

浏览器能正常获取/static/css/main.xxxxxxxx.css，但请求/static/js/main.yyyyyyyy.js时返回index.html，本质是服务器未找到对应的JS文件，触发了兜底的app.get('*')路由返回单页应用的入口文件。

解决步骤 #

1. 确认JS文件实际存在 #

• 打开项目根目录下的/build文件夹，检查/static/js/main.yyyyyyyy.js是否存在，文件名（包括哈希值）必须和浏览器请求的完全一致。
• 如果文件不存在，重新执行React构建命令（npm run build），确保构建过程无报错。

2. 调试静态资源中间件 #

在Express的静态资源配置中添加日志，确认请求是否被正确处理：

app.use(Express.static(path.resolve(__dirname, '../build'), {
  setHeaders: (res, filePath) => {
    console.log(`处理静态资源请求: ${req.originalUrl} -> 文件路径: ${filePath}`);
  }
}));

重启服务器后重新请求JS文件，查看控制台日志：

• 如果日志中出现对应的JS文件路径，说明静态中间件已处理请求，问题可能出在浏览器缓存或文件内容异常；
• 如果无日志输出，说明请求路径和静态资源的路径不匹配。

3. 检查React的publicPath配置 #

React构建时的publicPath会影响静态资源的路径：

• 打开项目的package.json，查看homepage字段：
  • 如果homepage设置为非/的值（比如"homepage": "/my-app"），静态资源路径会变成/my-app/static/js/...，需要修改Express的静态资源配置，添加路径前缀：

    app.use('/my-app', Express.static(path.resolve(__dirname, '../build')));
    

  • 如果不需要前缀，将homepage设置为"/"，然后重新执行npm run build。

4. 清空浏览器缓存 #

浏览器可能缓存了旧的请求路径，强制刷新页面（Ctrl+F5）或清空浏览器缓存后重新请求。

5. 检查文件权限（Linux/macOS环境） #

如果服务器部署在Linux或macOS上，确保服务器进程有读取/build/static/js目录的权限：

chmod -R 755 ./build/

6. 验证路径解析正确性 #

尝试用path.join替代path.resolve，确认路径解析是否正确：

app.use(Express.static(path.join(__dirname, '../build')));

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