Laravel

【Laravel + Vue.js】formでPOST送信【419/CSRF対策】

Blade単体であれば@csrfを入れるだけで済みますが
Vueで作られたコンポーネント内にformがあり、
送信時に419 期限切れのページが出てしまう場合の対応です。

まずBladeにて<head>内にcsrf-tokenを入れます。

例）

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

vueのcomponentにて、目的のフォーム内にcsrfトークンを非表示項目として追加します。

例）

<form action="/example" method="POST">
    <input type="hidden" name="_token" :value="csrf">
</form>

csrfのトークンをmetaタグから取得してきます。

例）

<script>
     export default {
        data() {
            return {
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            }
        }, 
    }
</script>

これでVueのコンポーネント内のフォームでもPOST送信が可能になります。

-Laravel
-