Unexpected token < in JSON at position 0 的毛病剖析

2023年1月26日 1,239次阅读 来源: lllluull

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的页面？（多是缺乏地点或许代办设置毛病）

假如统统看起来没题目（新加的地点，服务端没有重启），那就重启前端和后端服务器，看看是否是题目处理了

    原文作者：lllluull
    原文地址: https://segmentfault.com/a/1190000017545154
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞