AjaxやFetchAPIで「エラー: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON」がでるとき

前書き

JavaScriptでFetchAPIを使用し、非同期通信を行おうとしていた際に下記のエラーが発生しました。

コンソール

エラー:
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

原因

CSRFトークンの記述を忘れていたことが原因でした。

解決方法

今回はLaravelの環境で開発しているので、bladeとJSファイルに下記の記述を追加することで解決しました。

sample.blade.php

<meta name="csrf-token" content="{{ csrf_token() }}">

jQuerySample.js

headers: {
    // ↓ これが抜けてた
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content');
            
    // ↓ ここは任意です
    'Content-Type': 'application/json',
    'body': JSON.stringify(inputData);
},