Laravel: suddenly getting 419 CSRF Token Mismatch errors

I have been getting this error for the laste week on all my axios requests (except first one) on my laravel-vue app, it happens to all my api routes.

I’m attaching csrf token to all my axios requests inside bottstrap.js.

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


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

and added the proper meta-tag to all my blade files:

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

My route/s are all inside api.php file, they don’t have sanctum middleware enabled.

Route::post('/chats/test-endpoint','AppHttpControllersApiChatController@testEndpoint');

Api middlewares:

'api' => [
            'throttle:api',
            IlluminateRoutingMiddlewareSubstituteBindings::class,
            EnsureFrontendRequestsAreStateful::class,
            'throttle:60,1',
            IlluminateRoutingMiddlewareSubstituteBindings::class,
        ],

When I inspect network tab I can see X-XSRF-TOKEN is added to request headers (no X-CRSF-TOKEN though):

Request headers:

Cookie : XSRF-TOKEN = eyJpd...; app_session = eyJpd...

X-XSRF-TOKEN = eyJpd...

Response headers:

Set-Cookie : app_session = eyJpd...

The thing is, when I console log inside my vue component the content of the meta tag token, I get a different one, not sure if this is becauseI get the unencrypted value.

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

token gbczby2kuUI1nSMs6AEMsV7tv...

Please help me, this never happened while I was developing my laravel apps.