2024
September
13
【Laravel】jQueryのajax関数で419エラーが発生した時の解決法
弊社で管理しているECサイトではjQueryのajax関数を用いて、非同期通信であらゆる処理をおこなっています。
最近ECサイトをLaravelで構築し直すことがあったので、今回はその際にハマった問題とその解決法を紹介します。
サンプルコード
下記のコードは弊社で実際に利用しているソースコードを少しいじった物で、非同期でカート内の商品数を変更する処理をしています。
$.ajax({
url: '/cart/update',
type: 'post',
data: {
"id": $(this).data('id'),
"quantity": $(this).data('quantity'),
}
}).done(function(res) {
if(!res) {
alert('数量変更に失敗しました!');
return false;
}
console.log('done');
});
非Laravelで構築されたサイトでは問題なく動作していたのですが、このコードをLaravelに載せ替えたところ通信に失敗し419エラーが発生してしまいました。
419エラーの原因と解決法
調べたところ、原因はAjaxのPOST通信でCSRF対策がされていないことによるものでした。
LaravelでAPIへリクエストを送信する際は、ヘッダー情報にCSRFトークンを付与しなければならなかったのです。
Laravel(9系)では resources/views/layouts/app.blade.php にデフォルトでCSRFトークンがmeta情報として出力されているので、これを利用します。
$.ajax({
url: '/cart/update',
+ headers: {
+ 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
+ },
type: 'post',
data: {
"id": $(this).data('id'),
"quantity": $(this).data('quantity'),
}
}).done(function(res) {
if(!res) {
alert('数量変更に失敗しました!');
return false;
}
console.log('done');
});
headersに取得したトークンを指定してあげるだけです。
これで前述の419エラーは解消し、ajax関数を正常に実行することができるようになりました。
このカテゴリの最新記事
2023.05.24
【git】defaultブランチ名の変更
2024.08.29
ChatGPT APIとC#(またはPython)を活用したAIメール応答システムの構築方法
2023.09.11
【Certbot】CentOS7+Apache2.4にLet’s Encryptで証明書発行
2024.01.12
モダンなHTMLとCSSマークアップ方法