React+Express项目GET请求客户端报错，求排查解决方法

问题说明 #

使用React和Express.js开发应用，React端已配置静态资源，后端使用以下代码构建，但发起GET请求时客户端控制台出现404错误。

后端代码：

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

// Backend API router
app.use("/api", router);

客户端报错：

GET http://localhost:3000/api/networks 404 (Not Found)

解决方案 #

核心原因 #

Express按路由定义的顺序匹配请求，你把匹配所有路径的通配路由app.get("*")放在了API路由前面，导致所有请求（包括/api开头的接口请求）都被拦截，直接返回React的index.html，根本没走到API路由的处理逻辑。

修复步骤 #

1. 调整路由注册顺序：先注册API路由，再处理React单页应用的 fallback 路由：

// 先加载API路由
app.use("/api", router);

// 最后处理所有其他请求，返回React入口文件
app.get("*", (req, res, next) => {
  res.sendFile(path.join(__dirname, "build", "../../build/index.html"));
});

2. 验证静态文件路径正确性：
   path.join拼接的路径可能因项目结构出错，建议改用path.resolve来确保路径指向正确（根据你的实际项目结构调整路径）：

res.sendFile(path.resolve(__dirname, "../../build/index.html"));

内容的提问来源于stack exchange，提问作者Atalay Özyıldırım