Unexpected token '<', "<!DOCTYPE "... is not valid JSON

2025年12月31日 10:28 状态: processing

🚨 错误信息

Error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

🤖 AI解决方案

报错分析报告

错误翻译


原文：Unexpected token '<', "译文：意外的标记'<'，"

原因分析

这是一个典型的JSON解析错误。当代码期望接收JSON格式的数据时，实际上却收到了HTML内容（通常是错误页面）。

根本原因：

API请求失败：请求的接口可能返回了404、500等错误状态码

服务器返回了HTML错误页面：而不是预期的JSON响应

前端代码直接尝试解析HTML为JSON：导致JSON.parse()失败

错误位置：通常在fetch().then(response => response.json())或类似的数据解析代码处。

解决方案

方案1：检查响应状态（推荐）

javascript
fetch('https://api.example.com/data')
  .then(response => {
    // 首先检查响应状态
    if (!response.ok) {
      throw new Error(

HTTP错误: ${response.status}

);
    }
    
    // 检查Content-Type是否为JSON
    const contentType = response.headers.get('content-type');
    if (!contentType || !contentType.includes('application/json')) {
      throw new Error('服务器未返回JSON格式数据');
    }
    
    return response.json();
  })
  .then(data => {
    // 处理数据
    console.log(data);
  })
  .catch(error => {
    console.error('请求失败:', error);
    // 显示用户友好的错误信息
  });
方案2：使用try-catch处理解析错误

javascript
fetch('https://api.example.com/data')
  .then(response => response.text()) // 先获取文本
  .then(text => {
    try {
      const data = JSON.parse(text);
      // 处理数据
      console.log(data);
    } catch (error) {
      console.error('JSON解析失败:', error);
      console.log('服务器返回的内容:', text.substring(0, 200)); // 查看前200字符
    }
  })
  .catch(error => {
    console.error('请求失败:', error);
  });


##️ 预防措施
1. 添加响应验证

始终检查HTTP状态码：在解析JSON前验证response.ok或response.status

验证Content-Type：确保服务器返回的是application/json`类型

使用网络调试工具：Chrome DevTools的Network标签可以帮助查看原始响应

2.️ 开发建议

API请求封装：创建统一的请求函数，集中处理错误和响应验证

错误边界处理：在前端应用中实现错误边界，避免整个应用崩溃

日志记录：在生产环境中记录详细的错误信息，包括请求URL和响应内容