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

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

当你发送一个HTTP请求，多是用Fetch或者其余的Ajax库，可能会出现这个错误提示，或者类似的错误。
接下来我将解释这是由什么引发的，咱们应该怎样解决这些问题

1.引发的缘由

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

fetch('/users').then(res => res.json())

实际的请求没有问题，它获得了一个返回值，发生问题的关键在于res.json()。

2. JSON.parse

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

JSON.parse(`不是Json的字符串`);

JSON.parse()本质上是和res.json()同样的，因此它们发生错误的状况是相同的。

3. 无效的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

4.解决方案

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的括号里面的缘由。

5. 是由于服务器的缘由吗？

服务器有好几种缘由返回HTML而不是JSON：

• 请求的url不存在，服务器以HTML的方式返回404页面。你可能在请求时代码写错（像把/user写成了/users）,或者服务端的代码的错误。
• 当添加了新的路由时，服务器须要重启。好比你在用Express写的服务器时，刚刚新加了一个app.get('/users', ...)路由，可是没有重启，服务器就不会对新的路由地址有反应。
• 客户端的代理没有设置： 若是在使用像Create React App的Webpack dev server时，你能够设置一个指向后端服务器的代理。
• API的根url是/,若是你在经过Webpack 或Create React App使用代理,要确认你的API路由不在根的层级/。这样会时代理服务器混淆，你将获得一个HTML而不是你的API请求的返回。你能够在若有前面加个前缀像/api/。

同时能够经过devtools的network查看请求的返回值。

是否是404页面？（多是缺乏该地址或者代码输入错误）。

这是否是index.html的页面？（多是缺乏地址或者代理配置错误）

若是一切看起来没问题（新加的地址，服务端没有重启），那就重启前端和后端服务器，看看是否是问题解决了