Laravel 6.xで”axios.post”した際に419エラーが返された場合の対処

この記事は更新から2年以上経過しています。情報が古い可能性がありますのでご注意下さい。

発生した問題
1. JavaScript
原因
対処法
1. View
2. JavaScript
参考文献

発生した問題

Vue.jsの”axios.post”でデータ送信時、ステータスコード”419″が返される。

JavaScript

let params = {
  name : 'bar',
}

axios.post('/foo', params)
.then(function(response){

})
.catch(function(error){

});

原因

CSRF対策の為のトークンが一致していない。

対処法

viewの何処かにトークンを出力し、そこからJavaScriptで取得してaxiosのヘッダーにセットする。
(viewに直接JavaScriptを書いているなら、CSRFを直接出力するよう書いても良い)

Laravelに初期で入っている共通viewである”app.blade.php”を読み込んでいるならば、metaタグに出力されている。

View

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

JavaScript

let params = {
  name : 'bar',
}

axios.defaults.headers.common = {
  'X-Requested-With': 'XMLHttpRequest',
  'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
};

axios.post('/foo', params)
.then(function(response){

})
.catch(function(error){

});