Unexpected token ＜ in JSON at position 0 的错误解析

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

当你发送一个HTTP请求，可能是用Fetch或者其他的Ajax库，可能会出现这个错误提示，或者相似的错误。

接下来我将解释这是由什么引起的，我们应该怎样解决这些问题

引起的原因

这些错误发生在当你向服务器发送请求，返回值不是JSON而用JSON的方法解析的时候，发生这种情况的代码可能是这样的。

JSON.parse

实际的请求没有问题，它得到了一个返回值，发生问题的关键在于

res.json()。

用另一种方法JSON.parse来解析Json的， 代码可能是这样的

JSON.parse()本质上是和res.json()一样的，所以它们发生错误的情况是相同的。

无效的JSON

JSON应该以有效的JSON值开始 —— 一个object, array, string, number, 或者是

false/true/null。以<开始的返回值会有Unexpected token <这样的提示。

<这个符号意味着返回值是HTML而不是JSON。

引起这个错误的根源是服务端返回的是HTML或者其他不是Json的字符串。

为什么会这样呢？

“Unexpected token o in JSON at position 1” 或者其他变量。

错误的提示一些差别会随着服务器返回的不同而不同

它所提示的符号或者位置可能不同，但是引起它的原因是相同的： 你的代码所有解析的Json不是真的有效的Json。

下面是一些我所看见的错误的提示：

Unexpected token < in JSON at position 1
Unexpected token p in JSON at position 0
Unexpected token d in JSON at position 0
           

解决方案

With fetch, you can use res.text() instead of res.json() to get the text string itself. Alter your code to read something like this, and check the console to see what’s causing the problem:

首先要做是先把返回值打印出来。如果用fetch，可以用res.text()代替res.json()来获得字符串。把你的代码转换成如下这样，并且通过打印出来的内容查看哪里出问题了。

fetch('/users')
  // .then(res => res.json()) // comment this out for now
  .then(res => res.text())          // convert to plain text
  .then(text => console.log(text))  // then log it out
           

注意像res.json()和res.text()这样的方法是异步的。所以不能直接把它们的返回值打印出来，这就是console.log必须在.then的括号里面的原因。