Express根路径GET请求失败但POST等请求正常 React代理下JSON解析报错

你遇到的报错本质是React开发服务器（webpack-dev-server）拦截了根路径的GET请求，返回了前端入口HTML文件，而非转发到Express服务端，你调用res.json()解析HTML内容自然会报Unexpected token < in JSON at position 0的错误。
至于POST请求能正常运行，是因为create-react-app默认的简易代理规则只会对GET请求优先匹配静态资源/首页资源，非GET请求会直接转发到后端服务。

可行解决方案 #

方案1：统一接口前缀（推荐）

给所有后端接口添加统一前缀，避免和前端路由/静态资源路径冲突：

1. Express侧调整路由规则：

// 所有接口统一加/api前缀
router.get('/api/', postListView)
router.post('/api/', postCreateView)

2. React侧请求路径对应调整：

// GET请求
fetch(`/api/`).then(/* 原有逻辑 */)
// POST请求
fetch(`/api/`, {/* 原有配置 */}).then(/* 原有逻辑 */)

该方案适配性最高，生产部署时也可以很方便通过nginx等反向代理区分前后端请求。

方案2：自定义代理规则

如果你不想修改接口路径，可以替换package.json中的简易proxy配置，用自定义代理规则强制转发根路径请求：

1. 安装依赖：

npm install http-proxy-middleware --save-dev

2. 在React项目src目录下新建setupProxy.js文件，写入以下内容：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/',
    createProxyMiddleware({
      target: 'http://127.0.0.1:5000',
      changeOrigin: true,
      index: false, // 关键配置：禁止拦截根路径GET请求返回前端首页
    })
  );
};

3. 重启React开发服务即可生效。

你可以先打开浏览器控制台的网络面板，查看根路径GET请求的响应内容，确认返回的是HTML文件后再按上述方案调整即可。

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