构建项目后API返回HTML而非JSON，好友列表加载失败求助

安全阿岳

2026-6-30

问题排查与解决办法

最可能的根源

你遇到的情况90%是后端路由顺序搞反了——静态资源托管的路由优先级比API路由高，导致所有GET请求都被前端的SPA fallback规则捕获，返回了index.html，而不是API接口的JSON数据。毕竟登录、注册这些POST请求不会触发SPA的路由fallback，所以能正常工作。

具体排查步骤

先检查后端路由顺序
拿Express举例子，正确的写法必须是先定义所有API接口，再托管前端静态文件，最后放SPA的fallback路由：

// 先挂API路由，比如你的用户列表接口
app.use('/api/user', userRouter);
// 再托管build后的静态文件
app.use(express.static(path.join(__dirname, '../client/build')));
// 最后处理SPA的路由fallback，只能放最后！
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build/index.html'));
});

如果把API路由写在静态托管之后，那所有GET请求都会被*规则截胡，直接返回index.html。

核对前端请求路径
确认前端调用/api/user/时的实际请求路径有没有错，比如前端的baseURL配置是否正确，有没有因为build后部署路径变化导致请求路径不对。
检查build脚本和后端静态目录
确保npm run build生成的静态文件目录和后端托管的目录是同一个，比如package.json里的build脚本：
```
"scripts": {
  "build": "react-scripts build"
}
```
后端里的路径要准确指向这个build文件夹，别写错了层级。
确认API端点的响应格式
检查你的getUserList接口代码，确保是用res.json()返回数据，而不是不小心返回了HTML。比如：
```
router.get('/', async (req, res) => {
  try {
    const users = await User.find();
    res.json(users); // 必须用json返回
  } catch (err) {
    res.status(500).json({ msg: err.message });
  }
});
```
如果接口里错误处理返回了HTML页面，也会出现这个问题。