Node+React构建版应用Fetch请求返回index.html问题求助

核心原因分析 #

1. 开发代理仅在dev server生效
   package.json中的proxy配置是Create React App开发服务器的专属配置，仅在npm start时起作用。构建生产版本后，前端静态文件没有代理能力，请求直接发送到目标端口（这里是3000），如果后端未正确区分API请求与静态资源路由，就会把API请求当成单页应用的路由，返回index.html。

2. 后端路由顺序错误
   如果后端先配置了express.static托管静态资源，再定义API路由，或者最后没有正确设置单页应用的路由fallback，当API请求匹配失败时，会直接返回index.html。

3. CORS配置与生产环境不匹配
   你的CORS配置仅允许http://localhost:3001的请求，但生产环境前端是从http://localhost:3000访问静态资源并发送请求，跨域限制会导致请求异常，间接触发路由fallback返回index.html。

4. 缺少请求体解析中间件
   如果后端未配置express.json()来解析JSON请求体，POST请求的内容无法被正确处理，导致API路由匹配失败，最终返回index.html。

解决方案 #

1. 调整后端路由顺序，正确区分API与静态资源

确保API路由优先于静态资源托管配置，最后添加单页应用的路由fallback：

const express = require('express');
const path = require('path');
const app = express();

// 先配置请求体解析中间件
app.use(express.json());

// 定义所有API路由
app.post("/user/login", (req, res) => {
  login(req, res);
});

// 托管React构建后的静态文件（根据实际路径调整）
app.use(express.static(path.join(__dirname, '../frontend/build')));

// 单页应用路由fallback：所有非API的GET请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2. 调整或移除CORS配置

生产环境如果前端和后端部署在同一端口，无需CORS，直接移除cors中间件即可：

// 移除这部分配置
// app.use(cors({
//     origin: 'http://localhost:3001',
//     credentials: true,
// }));

如果是前后端分开部署，将origin改为前端生产环境的实际访问地址（如http://your-frontend-domain.com）。

3. 确认构建文件部署路径正确

执行npm run build后，将frontend/build目录下的所有文件复制到后端指定的静态资源目录（如上述代码中的../frontend/build），确保后端能正确读取到静态文件。

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