如何修复语法错误：JSON 中位置 0 处出现意外标记 <

语法错误：JSON 中位置 0 处出现意外标记 < 错误表明 JavaScript 代码接收到非 JSON 数据（通常是 HTML），而不是预期的 JSON。要解决此问题，请检查接收到的数据，以确定问题所在。如果使用 fetch() 或 JSON.parse()，请将数据记录到控制台并检查常见问题，例如 URL 不正确、服务器错误或变量赋值和字符编码问题。

本指南有助于修复语法错误：JSON 中位置 0 处出现意外标记 <。本指南也适用于相同错误的其他常见变体：

摘要

这些错误表明您的 JavaScript 代码预期接收 JSON，但获取的是其他内容（可能是服务器端错误形式的 HTML）。要解决此问题，您需要检查在本应接收到 JSON 时您所接收到的内容，以确定问题所在。

详细信息

通常，当您的服务器返回 HTML（通常以 <DOCTYPE html> 或 <html> 开头）而不是 JSON 时，会导致此错误。有效的 JSON 不能以 < 字符开头，否则 JSON 解析器会立即知道数据不是有效的 JSON，并生成上述其中一种错误消息。

要修复此错误，您需要弄清楚为什么会获取 HTML（或其他内容）而不是预期的 JSON。为此，您需要将尝试解析的数据记录到控制台。

如果您使用的是 fetch()

如果您的代码如下所示，请使用此方法：

fetch('https://example.com/some/path/to/json')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    // Do something with data
});

在这种情况下，当 response.json() 尝试运行但无法将来自服务器的数据解析为 JSON 时，会抛出错误。您可以添加一个函数来处理该错误并显示来自服务器的响应正文的原始文本，并将其记录到控制台（请参阅下面有关注释行的说明）：

var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
    responseClone = response.clone(); // 2
    return response.json();
})
.then(function (data) {
    // Do something with data
}, function (rejectionReason) { // 3
    console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
    responseClone.text() // 5
    .then(function (bodyText) {
        console.log('Received the following instead of valid JSON:', bodyText); // 6
    });
});

以下是对每一行的解释，并附有编号注释：

  1. 需要一个 responseClone 变量来保存 response 对象的副本，因为 response 的正文只能被读取一次。调用 response.json() 时，系统会读取原始 response 的正文，这意味着在处理 JSON 解析错误时无法再次读取它。将 response 克隆到 responseClone 会提供两份响应正文以供使用：一个是原始 response 中的响应正文，与 response.json() 结合使用；另一个是克隆副本，在 response.json() 失败的情况下，与 responseClone.text() 结合使用。
  2. 此行代码使用从服务器收到的响应的克隆副本填充 responseClone 变量。
  3. 第二个函数参数被传递给在 response.json() 调用之后的 then() 函数。如果来自 response.json() 的 promise 被拒绝（即遇到 JSON 错误），将调用第二个函数。
  4. 此行代码记录被拒绝的 response.json() promise 和 responseClone 中的 rejectionReason，以便在需要时进行检查（例如，HTTP 状态代码通常对进行调试非常有用）。
  5. 它不是尝试将来自服务器的响应正文解析为 JSON，而是作为原始文本进行处理。
  6. 正文文本被记录到控制台以供检查。

如果您使用的是 JSON.parse()

如果抛出错误的代码如下所示，请使用此方法：

JSON.parse(data);

在这种情况下，如果遇到错误，您可以将数据记录到控制台以查看其中包含的内容：

try {
    JSON.parse(data);
}
catch (error) {
    console.log('Error parsing JSON:', error, data);
}

接下来该怎么做？

一旦您可以看到导致 JSON 解析错误的数据，就有望获得一个线索，了解为什么没有获得您预期的有效 JSON。导致此错误的一些最常见问题包括：