使用 Laravel 5.1 和 VueJS 的 TokenMismatchException

Question

我正在尝试使用 VueJS 发出 POST 请求。但是，我无法通过 TokenMismatchException。我在 Blade 主模板中有这个元标记：

<meta name="token" id="token" content="{!! csrf_token() !!}">

这在我的 VueJS 文件的顶部：

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

这是我的 VueJS 方法中调用 POST:

的行

this.$http.post('ads/create/store', this.content);

我已经尝试了太长时间来让令牌被接受。有人可以帮忙吗？

Answer 1

这是我的设置方法，希望对您有所帮助

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

//get the token from the meta tag
$('meta[name="_token"]').attr('content');

Answer 2

您应该在元标记和 JS getAttribute 调用中使用 'content' 属性：

html:

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

js:

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

Answer 3

以后可能更容易记住，可以用

{{ csrf_field() }}

如果您使用的是 blade 模板引擎。

Answer 4

如果你在一个vue实例中：

vue = new Vue({

只需添加

Vue.http.headers.common['X-CSRF-TOKEN'] = '{{csrf_token()}}';

在 $http 调用之前

this.$http.post('url(change here)', this.data)

TokenMismatchException using Laravel 5.1 and VueJS