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

Laravel

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>

ツチノコテクノロジーでは一緒に働く仲間を募集しています!

完全リモートで働きたい方へ!

詳しくは以下をご覧ください。

ツチノコテクノロジー採用サイト

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ツチノコテックアカデミアの記事は、社内で誰かが質問してくれたことに回答したときに、ついでに記載しています!(^^)/
みんなの悩みを共有すれば、きっと誰かの役に立つと信じて更新しています!

目次