【Laravel】jQueryのajax関数で419エラーが発生した時の解決法

弊社で管理しているECサイトではjQueryのajax関数を用いて、非同期通信であらゆる処理をおこなっています。

最近ECサイトをLaravelで構築し直すことがあったので、今回はその際にハマった問題とその解決法を紹介します。

サンプルコード

下記のコードは弊社で実際に利用しているソースコードを少しいじった物で、非同期でカート内の商品数を変更する処理をしています。

$.ajax({
    url: '/cart/update',
    type: 'post',
    data: {
        "id": $(this).data('id'),
        "quantity": $(this).data('quantity'),
    }
}).done(function(res) {
    if(!res) {
        alert('数量変更に失敗しました！');
        return false;
    }

    console.log('done');
});

非Laravelで構築されたサイトでは問題なく動作していたのですが、このコードをLaravelに載せ替えたところ通信に失敗し419エラーが発生してしまいました。

419エラーの原因と解決法

調べたところ、原因はAjaxのPOST通信でCSRF対策がされていないことによるものでした。

LaravelでAPIへリクエストを送信する際は、ヘッダー情報にCSRFトークンを付与しなければならなかったのです。

Laravel（9系）では resources/views/layouts/app.blade.php にデフォルトでCSRFトークンがmeta情報として出力されているので、これを利用します。

$.ajax({
    url: '/cart/update',
+   headers: {
+       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
+   },
    type: 'post',
    data: {
        "id": $(this).data('id'),
        "quantity": $(this).data('quantity'),
    }
}).done(function(res) {
    if(!res) {
        alert('数量変更に失敗しました！');
        return false;
    }

    console.log('done');
});

headersに取得したトークンを指定してあげるだけです。

これで前述の419エラーは解消し、ajax関数を正常に実行することができるようになりました。

TEXT BY

SAKAMOTO

Webエンジニア

Web制作会社にて2年勤務後、2016年にタイガーラック株式会社へ入社。入社後、フロントエンドからバックエンド、デザイン、広告運用まで幅広く担当。広く満遍なく対応できるのが強み。趣味はポケモンカードとブラジリアン柔術。対戦よろしく