React调用SpringBoot接口报Unexpected token < in JSON错误求助

问题根因 #

你遇到的Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0错误，本质是请求/players接口时，React开发服务器没有按照package.json配置的代理规则转发请求到8080端口的Spring Boot服务，反而返回了SPA应用默认的index.html页面。页面开头的<字符不符合JSON格式要求，因此解析JSON时报错。

排查&解决步骤 #

• 首先确认修改完package.json的proxy配置后，已经重启了React开发服务：proxy配置不会热更新，修改后必须重启npm/yarn start启动的服务才能生效，这是该问题最常见的诱因。
• 检查proxy配置的层级是否正确，确保proxy是package.json的顶层属性，没有嵌套在scripts/dependencies等字段内部，正确格式示例：

{
  "name": "react-frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {
    // 你的项目依赖
  }
}

• 给fetch请求指定Accept请求头，避免React开发服务器将接口请求识别为静态资源请求返回HTML，修改componentDidMount代码如下：

async componentDidMount() {
  try {
    const response = await fetch('/players', {
      headers: {
        'Accept': 'application/json'
      }
    });
    if (!response.ok) throw new Error('接口请求异常，状态码：' + response.status);
    const body = await response.json();
    this.setState({players: body});
  } catch (err) {
    console.error('拉取球员数据失败：', err);
  }
}

• 如果默认proxy配置始终不生效，可以使用自定义代理配置：
  1. 安装代理依赖：npm install http-proxy-middleware --save
  2. 在React项目根目录新建setupProxy.js文件，写入如下内容：

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

module.exports = function(app) {
  app.use(
    '/players',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true
    })
  );
};

3. 重启React开发服务后验证即可

• 临时验证方案：可以先把fetch请求地址改为全路径http://localhost:8080/players，同时在Spring Boot的PlayersController类上添加@CrossOrigin(origins = "*")注解放开跨域限制，先确认前后端功能链路正常，再回头排查代理配置问题。

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