SyntaxError: Unexpected token < in JSON at position 0 のエラーは、HTTP リクエストが JSON 形式のレスポンスを想定していたのに対し、JSON 以外のデータを受け取ったことを示しています。

リクエストを送信しているコードにアクセスできる場合、エラー処理のロジックを追加し、エラーやレスポンスデータをコンソールに記録することで、詳しい調査・デバッグを行ってください。記録の方法は、JavaScript コードで fetch() と JSON.parse() のどちらを使っているかに応じて異なります。

---

この記事では、SyntaxError: Unexpected token < in JSON at position 0 のエラーのトラブルシューティング方法について説明します。以下に示す同様な一般的なエラーにも利用できます。

• SyntaxError: The string did not match the expected pattern
• SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
• JSON Parse error: Unrecognized token '<'

このエラーは何が原因で発生しますか？

このエラーは、リクエストが JSON 形式のレスポンスを想定していたのに、実際のレスポンスが別の形式の場合に発生します。JSON パーサーは、無効なレスポンスを検出するとエラーをスローします。

このエラーの根本原因として、以下が考えられます。

• リクエストの URL が正しくない
• Content-Type ヘッダーが application/json に設定されていない
• 変数の代入や文字エンコーディングの問題
• サーバー側のエラー
• JSON の形式が正しくない

多くの場合、予期しないレスポンスはサーバー側のエラーに関する詳細を示す HTML または XML となります。

どのように修正すればよいですか？

エラー処理コードを追加し、エラーとレスポンスデータをコンソールに記録して、有効な JSON を受け取らなかった理由を調べてください。記録の方法は、コードで fetch() と JSON.parse() のどちらを使うかによって異なります。

よくある根本原因と解決策は以下のとおりです。

• レスポンスがステータスコード 500 の HTML だった場合: サーバーのエラーログを調べて、サーバー側のエラーがないか確認してください。
• レスポンスがステータスコード 404 の HTML だった場合: fetch() に渡された URL が正しいか確認してください。
• レスポンスが空白、または見慣れない文字列の場合: 変数の代入と文字エンコーディングを確認してください。

fetch() から取得したレスポンスデータを記録する

JavaScript fetch() 関数が、以下のようなコードであるとします。

このエラーは response.json() を呼び出した際、データを JSON として解析できない場合に発生します。たとえば、レスポンスが HTML または XML の場合が考えられます。

以下のように、レスポンスのクローンを作成し、エラーを処理する関数を追加して、コンソールにデータを出力してください。

response オブジェクトは一度しか読み込むことができないため、5 行目で元のレスポンスを読み込む前に、その内容をコンソールに出力するためにクローンを作成します。

8 行目で、エラー処理関数を追加します。response.json() が失敗した場合、この関数が呼び出されて、エラー内容と responseClone のデータをコンソールに記録し、問題を詳しく調べられるようにします。

JSON.parse() から取得したレスポンスデータを記録する

コードで JSON.parse(data) を使用している場合、try…catch ステートメントを追加してレスポンスデータをコンソールに記録し、エラーを処理できるようにします。