Unexpected token < in JSON at position 0 的錯(cuò)誤解析

史占廣發(fā)布于2019-08-23 14:22 / 1245人閱讀

摘要：實(shí)際的請(qǐng)求沒(méi)有問(wèn)題，它得到了一個(gè)返回值，發(fā)生問(wèn)題的關(guān)鍵在于。下面是一些我所看見(jiàn)的錯(cuò)誤的提示解決方案首先要做是先把返回值打印出來(lái)。同時(shí)可以通過(guò)的查看請(qǐng)求的返回值。

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0當(dāng)你發(fā)送一個(gè)HTTP請(qǐng)求，可能是用Fetch或者其他的Ajax庫(kù)，可能會(huì)出現(xiàn)這個(gè)錯(cuò)誤提示，或者相似的錯(cuò)誤。
  接下來(lái)我將解釋這是由什么引起的，我們應(yīng)該怎樣解決這些問(wèn)題

1.引起的原因

這些錯(cuò)誤發(fā)生在當(dāng)你向服務(wù)器發(fā)送請(qǐng)求，返回值不是JSON而用JSON的方法解析的時(shí)候，發(fā)生這種情況的代碼可能是這樣的。

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

實(shí)際的請(qǐng)求沒(méi)有問(wèn)題，它得到了一個(gè)返回值，發(fā)生問(wèn)題的關(guān)鍵在于res.json()。

2. JSON.parse

用另一種方法JSON.parse來(lái)解析Json的，代碼可能是這樣的

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

JSON.parse()本質(zhì)上是和res.json()一樣的，所以它們發(fā)生錯(cuò)誤的情況是相同的。

3. 無(wú)效的JSON

JSON應(yīng)該以有效的JSON值開(kāi)始 —— 一個(gè)object, array, string, number, 或者是
false/true/null。以<開(kāi)始的返回值會(huì)有Unexpected token <這樣的提示。
<這個(gè)符號(hào)意味著返回值是HTML而不是JSON。
引起這個(gè)錯(cuò)誤的根源是服務(wù)端返回的是HTML或者其他不是Json的字符串。

為什么會(huì)這樣呢？
“Unexpected token o in JSON at position 1” 或者其他變量。
錯(cuò)誤的提示一些差別會(huì)隨著服務(wù)器返回的不同而不同

它所提示的符號(hào)或者位置可能不同，但是引起它的原因是相同的：你的代碼所有解析的Json不是真的有效的Json。
下面是一些我所看見(jiàn)的錯(cuò)誤的提示：

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:
首先要做是先把返回值打印出來(lái)。如果用fetch，可以用res.text()代替res.json()來(lái)獲得字符串。把你的代碼轉(zhuǎn)換成如下這樣，并且通過(guò)打印出來(lái)的內(nèi)容查看哪里出問(wèn)題了。

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()這樣的方法是異步的。所以不能直接把它們的返回值打印出來(lái)，這就是console.log必須在.then的括號(hào)里面的原因。

5. 是因?yàn)榉?wù)器的原因嗎？

服務(wù)器有好幾種原因返回HTML而不是JSON：

請(qǐng)求的url不存在，服務(wù)器以HTML的方式返回404頁(yè)面。你可能在請(qǐng)求時(shí)代碼寫(xiě)錯(cuò)（像把/user寫(xiě)成了/users）,或者服務(wù)端的代碼的錯(cuò)誤。

當(dāng)添加了新的路由時(shí)，服務(wù)器需要重啟。比如你在用Express寫(xiě)的服務(wù)器時(shí)，剛剛新加了一個(gè)app.get("/users", ...)路由，但是沒(méi)有重啟，服務(wù)器就不會(huì)對(duì)新的路由地址有反應(yīng)。

客戶(hù)端的代理沒(méi)有設(shè)置：如果在使用像Create React App的Webpack dev server時(shí)，你可以設(shè)置一個(gè)指向后端服務(wù)器的代理。

API的根url是/,如果你在通過(guò)Webpack 或Create React App使用代理,要確認(rèn)你的API路由不在根的層級(jí)/。這樣會(huì)時(shí)代理服務(wù)器混淆，你將得到一個(gè)HTML而不是你的API請(qǐng)求的返回。你可以在如有前面加個(gè)前綴像/api/。

同時(shí)可以通過(guò)devtools的network查看請(qǐng)求的返回值。

是不是404頁(yè)面？（可能是缺少該地址或者代碼輸入錯(cuò)誤）。這是不是index.html的頁(yè)面？（可能是缺少地址或者代理配置錯(cuò)誤）
如果一切看起來(lái)沒(méi)問(wèn)題（新加的地址，服務(wù)端沒(méi)有重啟），那就重啟前端和后端服務(wù)器，看看是不是問(wèn)題解決了