【Laravel】Ajax通信をするときはCSRFトークンをヘッダーに追加しよう！

あきぞらです。

Laravelの開発を行っているとき、AjaxでPOST送信をしたいときがあります。

そのとき、LaravelではCSRFトークンというものを追加する必要があります。

今回はその方法について紹介していきます。

なお、今回の方法は公式にも記載があります。そちらも参照ください。

readouble.com

 

3 users

HTTPルーティング 5.1 Laravel

https://readouble.com/laravel/5.1/ja/routing.html

CSRFトークンを取得する

Laravelは以下のようにCSRFトークンを発行できます。

metaタグにその値を保存しておきます。

app.blade.phpなどに書いておくと良いと思います。

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

ajax通信時のヘッダーにトークンを含める

通信時のheadersに、X-CSRF-TOKENとして含めて送信してあげます。

const postData = {
  'test': 'akizora'
};
$.ajax({
    type: "POST",
    url: requestUrl,
    data: JSON.stringify(postData),
    contentType: 'application/json',
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
     }
  }).done(function( data ) {
    console.log('done');
  }).fail(function(){
    console.log('fail');
  });
})

逆に含めないと419エラーになったりするので、忘れずに実装していきましょう！