TokenMismatchException using Laravel 5.1 and VueJS

Question

I am trying to use VueJS to make a POST request. But, I cannot get past a TokenMismatchException. I have this meta tag in the main Blade template:

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

And this at the top of my VueJS file:

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

Here is the line in my VueJS method that invokes the POST:

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

I have tried for way too long to get the token accepted. Can anyone out there help?

Answer 1

You should use the 'content' attribute in the meta tag and JS getAttribute call:

html:

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

js:

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

Answer 2

Here is how I set mine up, hope it helps

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

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

Answer 3

Possibly easier to remember for the future, you can use

{{ csrf_field() }}

If you are using the blade templating engine.

Answer 4

If you are in a vue instance:

vue = new Vue({

Just add

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

before the $http call

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