React Fetch请求报错Unexpected token < in JSON，已配置proxy仍异常

这个错误我简直太熟悉了——本质上是你在尝试解析非JSON内容为JSON，而返回的内容开头是<，基本可以确定是HTML（比如API的错误页面、401/404提示页）。结合你的情况，我帮你一步步排查：

核心原因分析 #

当你调用response.json()时，浏览器会尝试把响应体解析成JSON格式，但如果API返回的是HTML（比如权限错误、路径错误的提示页面），就会抛出这个语法错误，因为HTML的第一个字符通常是<html>标签的<。

具体排查步骤 & 解决方案 #

1. 先修正请求头的致命错误 #

牛津词典API要求的权限头是**App-Id和App-Key（驼峰写法）**，但你代码里用的是小写的app_id和app_key！这会直接导致API返回401 Unauthorized错误，同时返回HTML错误页面，这就是你看到<的直接原因。

2. 核对proxy和API版本 #

先确认你用的牛津API版本：

• 如果是v2版本（现在官方主推的是v2），你的proxy应该设置为：

  "proxy": "https://od-api.oxforddictionaries.com/api/v2"
  

• 如果是v1版本（可能已废弃），proxy设置为"https://od-api.oxforddictionaries.com/api/v1"

另外，GET请求不需要Content-Type头，可以直接去掉，避免不必要的干扰。

3. 先打印原始响应，精准定位问题 #

在解析JSON之前，先打印响应的状态码和原始文本，这样能明确知道API返回的是什么：

componentDidMount() {
  fetch('/entries/en/ace', {
    headers: {
      Accept: 'application/json',
      'App-Id': '你的真实API_ID', // 注意驼峰写法
      'App-Key': '你的真实API_KEY', // 注意驼峰写法
    },
  })
  .then(response => {
    console.log('响应状态码:', response.status); // 看是200/401/404等
    return response.text(); // 先获取原始文本，不要直接json()
  })
  .then(rawText => {
    console.log('原始响应内容:', rawText);
    // 尝试手动解析，看是否是JSON
    try {
      const data = JSON.parse(rawText);
      console.log('解析后的JSON:', data);
    } catch (e) {
      console.error('解析JSON失败，内容是HTML:', e);
    }
  })
  .catch(err => console.error('请求错误:', err));
}

4. 修正后的完整请求代码 #

假设你用的是v2 API，修正后的代码如下：

componentDidMount() {
  fetch('/entries/en/ace', {
    headers: {
      Accept: 'application/json',
      'App-Id': '你的API_ID',
      'App-Key': '你的API_KEY',
    },
  })
  .then(response => {
    // 先判断响应是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('获取数据成功:', data);
    // 在这里处理你的数据逻辑
  })
  .catch(err => console.error('请求或解析错误:', err));
}

额外注意事项 #

• 确认你的API_ID和API_KEY是正确的，没有拼写错误或过期
• 如果proxy在开发环境不生效，尝试重启create-react-app的开发服务器（proxy修改后需要重启才会生效）

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