Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0html
當你發送一個HTTP請求，多是用Fetch或者其餘的Ajax庫，可能會出現這個錯誤提示，或者類似的錯誤。接下來我將解釋這是由什麼引發的，咱們應該怎樣解決這些問題前端
1.引發的緣由
這些錯誤發生在當你向服務器發送請求，返回值不是JSON而用JSON的方法解析的時候，發生這種狀況的代碼多是這樣的。web
fetch('/users').then(res => res.json())
實際的請求沒有問題，它獲得了一個返回值，發生問題的關鍵在於res.json()。json
2. JSON.parse
用另外一種方法JSON.parse來解析Json的， 代碼多是這樣的後端
JSON.parse(`不是Json的字符串`);
JSON.parse()本質上是和res.json()同樣的，因此它們發生錯誤的狀況是相同的。api
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。下面是一些我所看見的錯誤的提示：app
-
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的頁面？（多是缺乏地址或者代理配置錯誤）
若是一切看起來沒問題（新加的地址，服務端沒有重啓），那就重啓前端和後端服務器，看看是否是問題解決了
本文分享自微信公衆號 - 字節逆旅（wvivw_007）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。