VueJS/Laravel - vue-resource allways gives status 419 on post request

Question

i'm trying to get my post request running in vue.

I'm using vue-resource to do post/get requests. Get method is working. Post is not.

I used the vue-resource "get" for a pagination on my laravel program and it worked perfect.

Now I need to pass some data via post to my server, but this doesn't really work.

My 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'
});

The important part of my component, where i'm trying to do the post request:

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

What I get:

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

Some exceptions of laravel with no message

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

And yeah.. I have no clue anymore. Other people with the same or related problem said I need this in my head:

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

and this at the end ( this gets rendered after the vue instance )

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

Of course I had those at the right place. I also tried to put this snipped here:

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

At the end of my app.js file and it did not worked out for me. If I put this code over the const app and not at the end, my whole vueJS is not running anymore.

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

Okay, I've found a way. I haven't thought that this will work. In the Laravel VerifyCsrfToken.php is a :

protected $except = [ '/dashboard/saveTradingData' ];

Where I can add URIs that should be excluded from CSRF verification.

But I don't really like this solution..

But do you use jquery for your ajax requests? As that solution is meant for jquery — online Thomas
Well, I also use jquery in the project. Thats why I had this jquery code at the end (the ajaxSetup). This here, is only VueJS. — JuniorDev
I'm on my phone an it is 2am here so I hoped to help you in the right direction. But I cannot type a proper answer right now — online Thomas

Ohgodwhy Ohgodwhy · Accepted Answer · 2018-12-17T02:51:48

You can set the headers of any requests going out for vue-resource using 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-resource allways gives status 419 on post request

1 Answers