Question

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

<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

您应该使用＆＃39;内容＆＃39;元标记中的属性和JS getAttribute调用：

HTML：

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

JS：

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

Answer 2

这是我如何设置我的，希望它有所帮助

// Show the post url in the document, since forms are blocked in Stack Snippets.
$('form').on('submit', function() {
  document.write(
     'about to navigate to: ' + 
      $(this).attr('action') + '?' + 
      $(this).serialize());
});

Answer 3

将来可能更容易记住，你可以使用

{{ csrf_field() }}

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

Answer 4

如果您在vue实例中：

vue = new Vue({

添加

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

在$http电话

之前

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

使用Laravel 5.1和VueJS的TokenMismatchException

4 个答案: