Laravel + Vue.js (axios) - CSRF token mismatch

Question

I have problem with csrf token in Laravel. Sometimes request POST (via axios) returns 419 code "CSRF token mismatch" but request header contain CSRF and XSRF tokens. Interestingly, it's not happend in incognito mode.

App.blade:

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

bootstrap.js:

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


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

Kernel.php:

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\Localization::class,
        ],

I tried to clear cache and config with no results. Any ideas how to fix it?

You say it sometimes works sometimes doesn't? Does it fail when you're submitting forms? — Jon White
– Jon White, Commented Dec 22, 2019 at 23:14
It's happens randomly (for example when user try to log out or send a message via form). — serpentow
– serpentow, Commented Dec 22, 2019 at 23:19
I answered a related question here: stackoverflow.com/a/78369072/10718307 on csrf token mismatch. — Bubune
– Bubune, Commented Apr 22, 2024 at 22:43

Kevin Lynch · Accepted Answer · 2020-12-09 14:28:03Z

12

I encountered this issue. The cause was axios headers not being set. Setting them on the axis object within the component also did not resolve the issue. Setting the headers after the object is defined resolved the issue for me.

In your blade view add the following:

<script>window.Laravel = {csrfToken: '{{ csrf_token() }}'}</script>

In your bootstrap.js file, after declaring window.axios = require('axios'); add the following:

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

answered Dec 9, 2020 at 14:28

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

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

3 Comments

Андрей Рик Over a year ago

Man, thanks you very much! I lost two days before find your answer! It's WORKS!!!! YEAH!

Anoxy Over a year ago

Hi there, i encouter the same problem its very sporadic and most of the time the XSRF token is set. However sometimes its not, Kevin, do you know if this approach will conflict with the automatic behavior that axios has of setting XSRF token in lararvel? Thanks.

Lk77 Over a year ago

it's more recomended to use a meta tag in the header : <meta name="csrf-token" content="{{ csrf_token() }}"> and then document.head.querySelector('meta[name="csrf-token"]').content to retrieve the token

s00103898-276165-15433 · Accepted Answer · 2022-01-31 19:58:38Z

3

I've the problem when fecthing data from laravel database (webA) in another website(webB). After some research, I find Laravel already has one solution for this senario: https://laravel.com/docs/5.7/csrf to exclude the route you are visiting from another web. In VerifyCsrfToken.php, exclude the route or page.

<?php
    
    namespace App\Http\Middleware;
    
    use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
    
    class VerifyCsrfToken extends Middleware
    {
        /**
         * The URIs that should be excluded from CSRF verification.
         *
         * @var array
         */
        protected $except = [
            'stripe/*',
            'http://example.com/foo/bar',
            'http://example.com/foo/*',
        ];
    }

answered Jan 31, 2022 at 19:58

s00103898-276165-15433

1,05811 silver badges12 bronze badges

1 Comment

Steve Over a year ago

This is not a correct approach and it creates security vulnerabilities.

Khalil Laleh · Accepted Answer · 2019-12-23 00:24:27Z

1

Sometimes?! It sounds like a expired token.

When you're working in incognito tabs, you have a fresh token.

Try location.reload() when you're getting 419 error code and everything goes well.

answered Dec 23, 2019 at 0:24

Khalil Laleh

1,23811 silver badges19 bronze badges

Comments

eightball · Accepted Answer · 2021-09-16 13:15:27Z

1

I think the token is expired in your case. You can intercept http status 419 (non standard status defined by Laravel) and reload the page to generate a new CSRF token :

window.axios.interceptors.response.use(
    response => response.data,
    error => {
        if (error.response && 419 === error.response.status) {
            window.location.reload()
        }

        return Promise.reject(error)
    }
)

answered Sep 16, 2021 at 13:15

eightball

1,27910 silver badges17 bronze badges

1 Comment

Christian Noel Over a year ago

this is my preferred approach. though i have made slight changes to my Axios.js module since the returned response from laravel isn't an actual error. the best thing about this solution is that you can centralize the token_mismatch issue in a single file like a middleware instead of verifying within every component.

darioosh10 · Accepted Answer · 2023-01-25 13:59:42Z

1

Please note that difference between http and https from client to server creates this error as well; Meaning that even if all your configs are ok, if https is not enforced and client uses http, then this error is produced.

answered Jan 25, 2023 at 13:59

darioosh10

314 bronze badges

1 Comment

Jeremie Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Amin.Qarabaqi · Accepted Answer · 2023-09-28 06:44:58Z

-1

On your front-end application startup, always send a request to /sanctum/csrf-cookie, with axios withCredentials:true set up.

Remember to set supports_credentials => true in laravel cors.php config file.

And set SANCTUM_STATEFUL_DOMAINS in .env file correctly,

SANCTUM_STATEFUL_DOMAINS=127.0.0.1:8000,127.0.0.1:3000,localhost:3000

It's better to have exact one root domain in front-end and backend.

answered Sep 28, 2023 at 6:44

Amin.Qarabaqi

7231 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Laravel + Vue.js (axios) - CSRF token mismatch

6 Answers 6

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related