Question

我正在尝试让发帖请求在vue中运行。

我正在使用vue-resource来发布/获取请求。获取方法正在工作。帖子不是。

我在laravel程序中使用了vue资源“ get”进行分页，并且效果很好。

现在，我需要通过发布将一些数据传递到我的服务器，但这实际上不起作用。

我的app.js：

// require('./bootstrap');
window.Vue = require('vue');

import VueResource from 'vue-resource';

Vue.use(VueResource);

Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('prices', require('./components/prices.vue'));

const app = new Vue({
    el: '#app'
});

我组件的重要部分，我正在尝试执行发布请求：

saveSellAndBuy: function () {
                Vue.http.post('/dashboard/savePricingData', {
                    buyAP: this.buyAP,
                    sellAP: this.sellAP,
                    tradeID: this.currentEditedKey
                }).then(function (data) {
                    console.log(data);
                });
            }

我得到的是：

app.js:13790 POST http://unicorn.com/dashboard/savePricingData 419 (unknown status)

laravel的一些例外，没有消息

exception: "Symfony\Component\HttpKernel\Exception\HttpException"
file: "/var/www/unicorn.de/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php"
line: 203
message: ""

是的。。我已经不知道了。其他有相同或相关问题的人说我需要这个想法：

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

最后一个（在vue实例之后呈现）

 $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

我当然有合适的位置。我还尝试将其片段在此处：

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

在我的app.js文件末尾，它对我来说没有用。如果我将此代码放在const应用程序上而不是在结尾处放置，则我的整个vueJS不再运行。

And here a picture that shows, that I do have the right cookies like XHR

好的，我找到了一种方法。我没想到这会行得通。在Laravel中，VerifyCsrfToken.php是一个：

受保护的$ except = [ '/ dashboard / saveTradingData' ];

我可以在其中添加应从CSRF验证中排除的URI。

但是我不太喜欢这种解决方案。

Answer 1

您可以使用vue-resource设置interceptors发出的所有请求的标头：

Vue.http.interceptors.push((request, next) => {
  const token = document.querySelector('#token').getAttribute('content')

  if (token) {
    request.headers.set('X-CSRF-TOKEN', token)
  }

  next()
})

VueJS / Laravel-vue资源在发布请求后始终显示状态419

1 个答案: