Laravelでajax利用時に419になってしまう場合の対応【一番簡単な解決方法です】

PHPの人気のフレームワークと言えばLaravel。そんなLaravelですが、CakePHPなどから移行すると419エラーに結構悩まされますよね。

LaravelではCSRF対策でPOST等でtokenがないとエラー（HTTPコードが419）になってしまいます。

別途回避もできるのですが、CSRF対策もあるのでできるだけ入れておきたいですよね。

今日はそんなLaravelでajax利用時に419エラーになってしまう対策をご紹介いたします。

このブログは現役のエンジニア（プログラマー歴が約12年）の僕（よしたか）が2019年12月後半から日々更新しております。

もしもアフィリエイトは会員登録後も無料です！
今すぐ会員登録してアフィリエイトを始めよう！

Laravelでajaxを利用する方法
1. Laravelのtokenの有効期限はデフォルトで2時間
まとめ

Laravelでajaxを利用する方法

まずLaravelでajaxを利用する方法ですが、

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

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
});

$.ajax({
    type: 'POST'
    , url: 'ajax_url'
    , dataType: 'json'
    , data: {'key':'value'},
}).done(function(data, status, xhr) {
    // 成功時の処理
}).fail(function(xhr, status, error) {
    // 失敗時の処理
});
<script>

簡単な例ですがこのように記述する事でajax通信ができると思います。

単純な処理の場合、このままでもいいのですが、例えば「setInterval」なんかを使って定期的にajax通信をする場合に、今回の問題に遭遇します。

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
});

setInterval(function() {
    ajaxCheck();
}, 60000);

function ajaxCheck() {
    $.ajax({
        type: 'POST'
        , url: 'ajax_url'
        , dataType: 'json'
        , data: {'key':'value'},
    }).done(function(data, status, xhr) {
        // 成功時の処理
    }).fail(function(xhr, status, error) {
        // 失敗時の処理
    });
}
<script>

このように60秒間隔でajax通信を行う場合ですね。

Laravelのtokenの有効期限はデフォルトで2時間

実はLaravelのtokenの有効期限はデフォルトで2時間となっています。

定期的にajax通信を行う場合、2時間以上、定期的にチェックを行うようなシステムの場合、途中でtokenの有効期限が切れてしまいます。

有効期限が切れると419エラーがかえってきてしまいます。

今回はそんな419が返ってきた場合の対処法を紹介いたしますが、僕がよく使っているのは419が返ってきたらリダイレクトさせてtokenをリフレッシュしてあげる、といったやり方です。

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
});

setInterval(function() {
    ajaxCheck();
}, 60000);

function ajaxCheck() {
    $.ajax({
        type: 'POST'
        , url: 'ajax_url'
        , dataType: 'json'
        , data: {'key':'value'},
    }).done(function(data, status, xhr) {
        // 成功時の処理

        // 419なのでリダイレクト
        if(xhr.status == 419) {
            location.href = location.href;
        }
    }).fail(function(xhr, status, error) {
        // 失敗時の処理

        // 419なのでリダイレクト
        if(xhr.status == 419) {
            location.href = location.href;
        }
    });
}
<script>

このように「xhr.status」で取得できるHTTPコードが419の場合にリダイレクトを行うといったやり方です。

他にもやり方はいくつかありますが、おそらく一番簡単な方法なのかなと思っています。