ajax - Vue-Resource が Ajax POST 呼び出しで TokenMismatchException を返す

Question

注意してください、私は Laravel フレームワークを使用しています。また、SOにも同様の質問があります。確認しましたが、それらの解決策に基づいて問題を解決できませんでした...

CSRFトークンを私の知る限り正しく設定しましたが、なぜ機能しないのかわかりません。

コンソールを確認すると、3 つの Cookie があるようです。2 つの Request Cookie のうち、1 つが呼び出されXSRF-TOKEN、1 つがlaravel_session. そしてレスポンlaravel_sessionクッキー1枚。価値観が違う！！！

私のビュー:

new Vue({
    el:'body',
    http: {
        root: '/root',
        headers: {
            'X-CSRF-Token': $('meta[name=_token]').attr('content')
        }
    },  
});

私の頭：

<meta name="_token" content="{!! csrf_token() !!}"/>

私の Vue コンポーネントの addNew メソッド:

Vue.component('things',{
    template:'#things-panel-template',
    data(){
        return {
            list: [],
            newThing: {
                body: '',
                // _token: $('meta[name=_token]').attr('content'),
                // tried removing token from head meta and adding up here.
            },
        }
    },
    methods:{
        addNew(){
            var thing = this.newThing; // get input
            this.newThing = {body:''}; // clear input
            this.$http.post('/api/things/add',thing) // send
        },
    },
});

私のルート：

Route::post('/api/things/add',function(){
    return App\Thing::create(Request::get());
});

そして最後に、私の Vue テンプレートのフォーム:

<form action="/things/add"
        method="POST"
        @submit.prevent="addNew"
    >
        <div class="form-group">
            {{ csrf_field() }}
            <label for="">Add</label>
            <input type="text"
                name="body"
                id="task-body"
                class="form-control"
                v-model="newThing.body"
            >
            <button :disabled="!isValid"
                class="btn btn-primary"
                type="submit"
            >Add</button>
        </div>
    </form>