chrome 111+ · JavaScript
報錯原文
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
這是什麼意思
你交給 JSON.parse 的是 HTML，不是 JSON。訊息裡引出的 <!DOCTYPE 片段就是證據，它說明伺服器回傳的是一個 HTML 頁面——404、502，或者跳轉登入頁——所以真正的毛病在剖析之前，在那次請求上。典型原因：網址寫錯、開發伺服器的代理把 index.html 當成 API 回傳了、工作階段過期被重新導向到登入頁。呼叫 res.json() 之前先看 res.ok，不對就用 res.text() 讀出到底來了什麼；用 curl -s 直接打那個網址是最快的一眼。Chrome 111 和 Node 20 之前，同一個錯誤寫作 Unexpected token < in JSON at position 0。
怎麼修
curl -s https://api.example.com/data | head -5- 來自
- chrome 111+
- JavaScript
- 15
瀏覽器和 node 的錯誤通常只告訴你什麼壞了，不告訴你那個值為什麼變成這樣——你讀了 undefined、它不是函式、它不是 JSON——所以該修的地方在拋錯那一行的上游；只用 ?. 和預設值把那一行按住，同樣的問題會在更遠的地方、以更難辨認的樣子回來。
怎麼讀報錯
- 從第一行往下讀。越往下越是工具內部的事，起因通常寫在最上面。
- 有檔名和行號就從那裡查——不是堆疊最上面那一格，而是最上面那條提到你自己寫的檔案的行。
- 把報錯原文照樣去搜，但先去掉你自己的路徑和變數名，正是那些讓搜尋比對不上。
- 同一種情況在不同版本裡措辭不同。結果不對頭，就把版本號一起加進查詢。
- 貼上修法之前，先確認它會丟掉什麼。這裡面有些是不能收回的。
常見問題
Q. “SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON” 是什麼意思？
你交給 JSON.parse 的是 HTML，不是 JSON。訊息裡引出的 <!DOCTYPE 片段就是證據，它說明伺服器回傳的是一個 HTML 頁面——404、502，或者跳轉登入頁——所以真正的毛病在剖析之前，在那次請求上。典型原因：網址寫錯、開發伺服器的代理把 index.html 當成 API 回傳了、工作階段過期被重新導向到登入頁。呼叫 res.json() 之前先看 res.ok，不對就用 res.text() 讀出到底來了什麼；用 curl -s 直接打那個網址是最快的一眼。Chrome 111 和 Node 20 之前，同一個錯誤寫作 Unexpected token < in JSON at position 0。
Q. 怎麼修？
curl -s https://api.example.com/data | head -5 —— 執行前先看上面的說明，確認這條命令會丟掉什麼。
Q. 這是哪個工具報的？
chrome 111+。它屬於JavaScript，報錯原文有 10 個詞。