React+Heroku部署：解决路由CANNOT GET与API返回HTML的循环问题

核心问题根源 #

• 刷新或手动输入React前端路由时，浏览器会直接向服务器发起GET请求，后端没有对应路由就返回CANNOT GET错误
• 直接添加通配路由返回index.html会覆盖所有未匹配请求，包括API接口的GET请求，导致API返回HTML而非JSON数据

正确解决步骤 #

1. 调整后端路由顺序 #

在server.js中先挂载所有API路由，再处理React静态文件，最后添加前端路由的fallback逻辑。这样API请求会被优先匹配，不会被前端路由的通配规则拦截。

修改后的server.js示例：

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

// 第一步：先挂载所有API路由，统一用/api前缀区分
const apiRoutes = require('./routes');
app.use('/api', apiRoutes);

// 第二步：处理React打包后的静态资源
app.use(express.static(path.join(__dirname, 'client/build')));

// 第三步：最后处理前端路由的fallback，非API请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

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

2. 统一API路由前缀 #

在routes.js中，所有接口使用相对路径，依托/api前缀做区分，避免和前端路由混淆：

// routes.js示例
const express = require('express');
const router = express.Router();

// 实际请求路径为 /api/get-data
router.get('/get-data', (req, res) => {
  res.json({ status: 'success', data: 'test content' });
});

module.exports = router;

3. 关于之前if判断失败的说明 #

大多是因为判断逻辑不严谨，比如没有用统一前缀区分API和前端路由，导致误判请求类型。用/api前缀+路由顺序的方案，不需要额外写复杂判断，逻辑更稳定。

4. 验证方式 #

• 用Postman请求/api/get-data，应正常返回JSON数据
• 在浏览器刷新或手动输入前端路由（如/user/profile），应正常渲染对应页面，不再返回404

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