Vue-Resource 在 Ajax POST 调用中给出 TokenMismatchException

Question

请注意，我使用的是 Laravel 框架。另请注意，SO 上也有类似的问题，我已经检查过了，但无法根据这些解决方案解决我的问题...

尽管据我所知我设置了我的 CSRF 令牌，但我不确定为什么它不起作用。

检查控制台时，我似乎有 3 个 cookie：两个请求 cookie，其中一个称为 XSRF-TOKEN，一个称为 laravel_session。还有一个响应 laravel_session cookie。都有不同的价值！！！

我的 Vue：

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>

Answer 1

试试这个：

this.$parent.$http.post('/api/things/add', thing)

而不是

this.$http.post('/api/things/add', thing)

或者使用全局配置设置默认值：

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name=_token]').attr('content');

Answer 2

我自己找到了答案：

如果您要使用 vue-component，您应该将令牌添加到该组件。 否则它不会与您的 ajax 请求。所以将这部分放在组件中的模板下面：

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

执行此操作以检查您的令牌是否已在 headers:

中正确发送

转到 google chrome，打开 dev-tools，转到网络选项卡并重新加载。
调用 ajax 并查看添加到网络选项卡中的文件，打开它并转到 'Headers' 选项卡。
查看底部显示的内容：'Request Headers' 并检查请求中是否正确添加了令牌。

Vue-Resource 在 Ajax POST 调用中给出 TokenMismatchException

Vue-Resource gives TokenMismatchException in Ajax POST call

ajax

laravel

vue.js

laravel-5.2

vue-resource

执行此操作以检查您的令牌是否已在 headers: