輸出檢查一下便知
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 1Unexpected token p in JSON at position 0Unexpected 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的頁面？（可能是缺少地址或者代理配置錯誤）
如果一切看起來沒問題（新加的地址，服務端沒有重啟），那就重啟前端和后端服務器，看看是不是問題解決了