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

史占广发布于2019-08-23 14:22 / 1232人阅读

摘要：实际的请求没有问题，它得到了一个返回值，发生问题的关键在于。下面是一些我所看见的错误的提示解决方案首先要做是先把返回值打印出来。同时可以通过的查看请求的返回值。

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的页面？（可能是缺少地址或者代理配置错误）

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

GPU云服务器云服务器 unexpected-token json的解析格式 js解析返回的json数据 json 格式错误

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100501.html

bug集合js1--Unexpected token o in JSON at position 1

摘要：可是这次又碰到了，所以这次必须要弄明白原因。将第一个字符理解为数组的开始，第二字符不知道怎么处理所以就抛出了上面的错误信息。资源仓库集合我的博客地址如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。欢迎访问我的个人博客：http://www.xiaolongwu.cn 写在前面的话这个问题在之前做项目时碰到过一次，当时按照网上的做法，去掉JSON...

funnyZhang 2019-08-23 14:53 评论0 收藏0
hexo+css遇到的unexpected token问题

摘要：问题背景使用模拟实现文档，页面和的语法差异遇到问题。文档中的效果如下分析问题报错信息写的很明确，，是不被期望的。遇到问题时，解决思路可以考虑下转义码标签。问题背景使用hexo+css模拟实现weex文档，页面Weex 和 Vue 2.x 的语法差异遇到问题。问题描述新建页面，copy进去内容，hexo server运行，控制台报错： FATAL Somethings wrong...

haoguo 2019-08-29 13:22 评论0 收藏0
JavaScript 调试常见报错以及修复方法

摘要：表示错误没有被语句捕获，是错误的名字。如何修复错误确保方法名正确。这个错误的行号将指出正确的位置。相关错误代码调用的方法在当前状态无法调用。通常由引起，在方法准备完毕之前调用它会引起错误。原文翻译出处涂鸦码农错误以及如何修复（看到一篇调试JS很有用的文章，收藏一下） JavaScript 调试是一场噩梦：首先给出的错误非常难以理解，其次给出的行号不总有帮助。有个查找错误含义，及修复...

zhongmeizhi 2019-08-21 10:25 评论0 收藏0
javascript错误处理类型

摘要：来聊一聊每一种错误类型的使用和出错的场景。不属于有效类型。例如抛出错误自定义错误类型有时候希望自定义错误类型，需要自定义一个构造函数，然后让原型继承继承即可。例如以下调用错误信息为以上为抛错的构造函数的总结，如有误之处欢迎扶正。在写javascript的时候，调试错误必不可少，除了能够在浏览器中打印出来错误外，常常还需要知道错误的类型是什么，以便对症下药的纠错；也有时候，在自己封装的...

lylwyy2016 2019-08-21 16:46 评论0 收藏0
比原链Bytom错误码一览

摘要：错误编号内容注释非比原标准错误请求超时非法的请求体为网络错误编号内容注释区块链网络类型不匹配是签名相关的错误编号内容注释需要签名的个数超过实际需求签名的个数签名格式错误缺少主公钥主公钥重复为交易相关的错误构建交易错误编号内容注释资产余额不 0XX API错误编号内容注释 BTM000 Bytom API Error 非比原标准错误 BTM001 Request t...

Nosee 2019-06-27 18:49 评论0 收藏0