Sometimes X-XSRF is missing from axios request

Hi there,

Sometimes once making requests with axios the X-XSRF-Token is missing which is obviously leading to the request getting blocked by the CSRF middleware. This happens maybe like 2/10 times. All the forms on the page (except login) uses pure axios calls and i have therefor not implemented any logic for setting the token as according to the laravel docs this should be handle automatically when using axios, and again it works, most of the time. My idea is to manually implement the X-CSRF-TOKEN in bootstrap.js however im unsure if this would conflict with the automatic X-XSRF. There does not seem to be any pattern in it being browser or device specific. Also, i have not experienced it myself but my bugsnag tells me it is a problem and every time the X-XSRF header is missing.

All ideas will be greatly appreciated!

Laravel: 8.34 Vue: 2.6.12 Axios: 0.21

Tjyoung

4 years ago

Level 14

use this in your bootstrap.js

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

and make sure that your header contains

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

PatrickSH

4 years ago

Level 1

@Tjyoung Thanks. But will this not conflict with XSRF token?

Tjyoung

4 years ago

Level 14

@PatrickSH no, I dont think so

Please or to participate in this conversation.