MERN栈结合Axios请求返回HTML而非JSON问题排查

嘿，我之前搭建MERN应用时也碰到过完全一样的坑！这种情况几乎都是因为后端路由配置顺序错误或者前端请求路径不对，导致服务器把你的API请求误判成了静态页面请求，返回了React的入口HTML文件。下面是几个你可以快速排查的方向：

1. 调整Express路由的顺序 #

如果你用Express做后端，一定要把API路由放在静态文件服务之前。因为Express会按顺序匹配路由，如果先加载了静态文件服务（比如express.static处理React的build文件），当你请求/api/weather这类接口时，服务器会先尝试找对应的静态文件，找不到就直接返回index.html，根本不会走到你的API路由。

举个错误示例：

// ❌ 错误：静态文件服务在API路由之前
app.use(express.static(path.join(__dirname, '../client/build')));
app.get('/api/weather', (req, res) => {
  res.json({ forecast: '多云转晴' });
});

正确的顺序应该是：

// ✅ 正确：先匹配API路由，再处理静态文件
app.get('/api/weather', (req, res) => {
  res.status(200).json({ forecast: '多云转晴' });
});
app.use(express.static(path.join(__dirname, '../client/build')));

2. 确认前端请求的URL是否正确 #

用Axios发起请求时，要注意路径是否指向了后端的API地址：

• 如果你用Create React App开发，记得在package.json里配置"proxy": "http://localhost:5000"（假设后端跑在5000端口），这样前端的axios.get('/api/weather')会自动转发到后端。
• 如果没配置代理，一定要写完整的URL：axios.get('http://localhost:5000/api/weather')，否则请求会发到前端的端口（比如3000），前端服务器没有对应路由，就会返回index.html。

3. 检查后端是否正确返回JSON #

确保你的API路由用的是res.json()而不是res.send()或res.render()：

// ✅ 正确返回JSON的方式
app.get('/api/weather', (req, res) => {
  res.status(200).json({ data: '模拟的5天天气预报数据' });
});

如果用了res.send()返回字符串，或者res.render()渲染模板，服务器返回的就不是JSON格式，而是文本或HTML。

4. 用浏览器开发者工具排查 #

打开F12进入Network标签，找到你的GET请求：

• 查看Request URL是否是你预期的后端API地址；
• 查看Response Headers里的Content-Type，如果是text/html，说明服务器确实返回了HTML，需要回到前面的步骤排查路由问题。

内容的提问来源于stack exchange，提问作者Alex Friedman