Laravel5.4 + VueJS CSRF token error: TokenMismatchException in VerifyCsrfToken.php line 68:

middleware->('auth')を使用時form関連を扱うときtokenが必要

純粋なLaravel App なら

blade templateの

{{ csrf_token() }}

からtokenを取得して

<input type="hidden" name="_token" value="7YC0Sxth7AYe4RFSjzaPf2ygLCecJhblahblah">

をセット、または

<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

で解決できるがvueの場合や外部のパッケージを利用した場合、blade templateを使用しないでマニュアルでセットしなければいけない。

  • e.g. axios

<script>

    var csrf_token = $('meta[name="csrf-token"]').attr('content');

    import axios from 'axios';

 

    export default {
        methods: {

            hoge() {

                axios.post('/send_something', {

                    _token: csrf_token

                });

            }

        }

    }

</script>

 

  • 例えばvue-core-image-uploadを導入した際、

 

<template>
  <vue-core-image-upload
    @imageuploaded = "imageuploaded"
    :max-file-size = "5242880"
    crop = "local"
    toCropImgY = "40px"
    :url = "url"
    :data = "token"
    inputOfFile = "image">
    <img :src="user.avatar" width="96" class="img-circle circle-border m-b-md" alt="profile">
  </vue-core-image-upload>
</template>

 var csrf_token = $('meta[name="csrf-token"]').attr('content'); // token の取得

data() {
  return {
    token: {
      _token: csrf_token
    },

 

参考:

stackoverflow.com

stackoverflow.com