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组件，你应该只将令牌添加到该组件。否则它将不会与你的ajax请求一起使用。因此，将此部分放在组件中的模板下面：

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

执行此操作以检查您的令牌是否已在标头内正确发送：

转到Google Chrome，打开开发工具，转到网络标签并重新加载。
进行ajax调用并查看网络选项卡中添加的文件，打开它并转到“标题”标签。
查看底部的位置：'Request Headers'并检查令牌是否已在请求中正确添加。

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

2 个答案:

执行此操作以检查您的令牌是否已在标头内正确发送：