Unexpected token < in JSON at position 0 的錯誤解析

史占廣發布于2019-08-23 14:22 / 1226人閱讀

摘要：實際的請求沒有問題，它得到了一個返回值，發生問題的關鍵在于。下面是一些我所看見的錯誤的提示解決方案首先要做是先把返回值打印出來。同時可以通過的查看請求的返回值。

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 格式錯誤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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