スポンサーリンク

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

Web系

発生した問題

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){

});

参考文献

Laravel5.5 Ajaxで419エラーが返ってくる
エラー, PHP, Laravel
【Vue】axiosで、デフォルトでCSRFトークンを設定できるようにする - Qiita
VueとRailsで開発していると, axiosでPOSTリクエスト等を送ったときに以下のエラーが出るかと思います。 422 (Unprocessable Entity) csrfトークン対策しなければならないのですが、エラーを...