Route and X-CSRF-TOKEN L5.4 and Vue2

Hello! I'm using the new 5.4 Laravel distribution with Vue JS 2 and VueResource. So, I have a route that receives a contact post form:

Route::post('/contact/store', 'Contact\ApiContactController@store')->middleware('api', 'web');

The CSRF TOKEN is set in the request header by the bootstrap.js, that's the result:

X-CSRF-TOKEN:puJvuutEI5YPkvz0m68LwduR3GCs4RFzqVcEi0YX

Well, the problem is, I still getting the TokenMismatchException

Thanks!

awoyele

9 years ago

Level 7

make sure you have all your conditionals closed.
make sure your form has the token_field {!! Form::token() !!}

renanpro03

9 years ago

Level 2

Thanks for your replay! I don't have the token field because I'm using Vue JS, not blade. The token is set in the request header.

Lynrch

9 years ago

Level 3

Bootstrap.js in Laravel 5.4 just set csrfToken for axios

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

add this

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
    next();
});

It's working with me. Hope can help you.

Please or to participate in this conversation.