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>