加载数据失败: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

### 解析 JSON 时遇到 `Unexpected token '<'` 错误的原因 当解析 JSON 数据时，如果出现 `SyntaxError: Unexpected token < in JSON at position 0` 的错误，通常是因为接收到的数据并非有效的 JSON 格式。具体来说，这种错误可能由以下原因引起： - **服务器返回的内容不是 JSON**：实际返回的是 HTML 或其他类型的响应内容[^4]。 - **网络请求路径有误**：请求的目标地址可能指向了一个静态页面或其他资源文件而非 API 接口[^3]。 以下是详细的分析以及解决方案： --- ### 原因一：服务器返回的内容不是 JSON 在某些情况下，尽管预期接收的是 JSON 数据，但实际上服务器却返回了 HTML 页面（例如错误页）。这可能导致前端尝试调用 `.json()` 方法解析时抛出异常，因为 `<` 是典型的 HTML 文档起始字符[^1]。 #### 验证方法 可以通过打印原始 HTTP 响应来验证其内容类型是否为 JSON： ```javascript fetch('/users') .then(response => { console.log('Response Headers:', response.headers.get('Content-Type')); // 检查 Content-Type 是否为 application/json if (!response.ok || !response.headers.get('content-type').includes('application/json')) { throw new Error('Invalid Response'); } return response.json(); }) .catch(error => console.error('Error:', error)); ``` --- ### 原因二：网络请求路径有误 如果请求的 URL 不正确或者目标服务不可达，则可能会触发默认行为——返回标准的 404 Not Found 页面或类似的错误提示信息。由于这些页面通常是 HTML 格式的文档，因此也会引发上述错误[^2]。 #### 调试建议 确认所使用的端点是否有效并指向正确的 RESTful Web Service。可以借助浏览器开发者工具中的 Network 面板查看具体的交互过程及其结果状态码。 --- ### 解决方案 为了妥善处理此类问题，可以从以下几个方面入手改进代码逻辑： 1. **先检查响应的状态** 在执行任何进一步操作之前，请确保 HTTP 请求成功完成并且收到了期望的结果形式。 ```javascript fetch('/users') .then(response => { if (!response.ok) { // 如果状态码不在范围 200–299 抛出异常 throw new Error(`HTTP error! status: ${response.status}`); } else if (!response.headers.get('content-type').includes('application/json')) { throw new TypeError('The server did not return a valid JSON response.'); } return response.json(); // 只在此处继续转换成对象结构 }).catch(err => alert(err.message)); // 显示捕获到的所有错误消息给用户看 ``` 2. **增强容错能力** 添加额外的安全措施以应对潜在的风险情况，比如设置超时时限或是定义重试机制等策略。 3. **测试环境配置一致性** 确认开发、预生产和正式上线三套环境中关于接口的服务定位保持一致无偏差。 通过以上调整能够显著降低遭遇该类运行期故障的概率，并提高系统的健壮性和用户体验满意度。 ---