Laravel で Ajax 通信しようとしたときに419エラーとなったときの対応方法

2023年3月8日

ツチノコテクノロジー管理人

URLをコピーしました！

Laravelは、POSTでリクエストする際にCSRF（クロスサイトリクエストフォージェリ）の対応を求めてきます。
通常画面では、formタグ内に、 @csrf と書けば対応してくれます。

Ajax通信を行う際には、リクエストヘッダーに X-CSRF-TOKENの設定が必要です。

参考 Laravel 8.x CSRF保護 X-CSRF-TOKEN
https://readouble.com/laravel/8.x/ja/csrf.html#csrf-x-csrf-token

まず準備として、HTMLの<head>タグ内で、csrf_tokenを設定しておきます。

<head>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  ~略~
</head>

次に、Ajax通信処理を記述する際に、headers に、X-CSRF-TOKEN を設定します。

<input type="text" name="postcode" id="input-postcode">
<script>
$(function() {
  $("#input-postcode").change(function() {
    $.ajax({
      type: 'POST',
      url: '/postcode',
      data: { 'postcode', $(this).val() },
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), // これが必要
      }
    }).done(function( data ) {
      // 成功したときの処理
      console.log('done');
    }).fail(function(){
      // 失敗したときの処理
      console.log('fail');
    });
  });
});
</script>