Missing X-CSRF-TOKEN in Vue headers

Question

I'm trying to make a POST using VueJS 1.0.28 but I'm getting a Laravel 5.3 TokenMismatchException error.

This is in app.js to cover both jQuery and Vue:

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

    next();
});

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

This is in the main.blade.php layout where we instantiate the Laravel value:

<script src="{!! asset('/js/app.js') !!}"></script>
<script>
    (function () {
        window.Laravel = {
            csrfToken: '{{ csrf_token() }}'
        };
    })();
</script>

When I look at the headers in the POST request, I don't see the X-CSRF included for Vue.

This is super basic stuff for jQuery and I'm a stumped what I misconfigured on the Vue side. Ideas?

Saurabh · Accepted Answer · 2016-12-30 01:00:02Z

1

Move to Vue 2.* if possible.
Don't mix Vue and jQuery. I promise, it will make your life easier.
For handling AJAX use e.g. AXIOS
If so, you will have just to use: axiosDefaults.headers.common['X-CSRF-Token'] = csrfToken;

edited Dec 30, 2016 at 1:00

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

answered Dec 29, 2016 at 20:41

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eComEvo Over a year ago

#1 not an option right now. #2 requirement of the project due to dependencies. #3 I'll look into it, but have no control over which lib the various packages use.

eComEvo · Accepted Answer · 2016-12-29 23:16:58Z

0

As it turns out, both Vue and jQuery were getting the token, but the package code I was using was directly using XMLHttpRequest so it needed to get the token manually by doing:

xhr.setRequestHeader('X-CSRF-TOKEN', Laravel.csrfToken);

answered Dec 29, 2016 at 23:16

eComEvo

12.9k27 gold badges101 silver badges161 bronze badges

Collectives™ on Stack Overflow

Missing X-CSRF-TOKEN in Vue headers

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related