Laravel Inertia and CSRF

I recently downloaded the Inertia pingcrm project to test out Inertia. In there I tried to use just an axios call like so

axios.post(this.route('posts.store'), {item: 'test'})
            .then( res => {
                console.log(res.data);
            })

and it gave me a 419 "CSRF token mismatch." I tried testing it out a bit more then decided to install a new clean inertia project. I did a similar setup but in the new project I am not getting any errors at all.

My question is how to be sure that CSRF is working on my new project?

piljac1

5 years ago

Level 28

I'm not familiar with the Laravel 8 + Jetstream scaffolding because our applications are still running Laravel 6 (yes we will upgrade soon :P), but for Laravel 6, I know axios headers are set in the bootsrap.js file. This is probably not the case in the project you downloaded.

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

4 likes

mantasja

4 years ago

Level 2

@piljac1 after user login action token changes, and Inertia js does not reload the blade template so the token remains outdated

3 likes

Please or to participate in this conversation.