Laravel sanctum works in localhost, but returns 401 unauthenticated in live server

Question

This is my 3rd post in a row on this issue, unfortunately I am not getting proper answer. I am developing an authentication system using laravel-sanctum in a laravel-vuejs app. The laravel-sanctum works fine (return user info from "/api/user" api) in the localhost. But when I am deploying in a live server, it returns 401 (unauthenicated) error. I am sharing my header here:

my.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:WvNeYkRnJbXNcttmiAKe1blplUslHWIsRQpvnPt0mxA=
APP_DEBUG=true
APP_URL=https://subdomain.domain.com/


DB_CONNECTION=mysql
DB_HOST=127.0.0.1

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=subdomain.domain.com
SESSION_SECURE_COOKIE=false
SANCTUM_STATIC_DOMAIN=subdomain.domain.com

My sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'subdomain.domain.com')),

'guard' => ['api'],

cors.php

'supports_credentials' => true,

auth.php

'defaults' => [
    'guard' => 'api',
    'passwords' => 'users',
],

'guards' => [
    'api' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
],

From bootstrap.js

window.axios = require('axios');

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

axios.defaults.withCredentials = true

Code from component (script)

mounted() {
    axios.defaults.headers.common["Authorization"] = `Bearer ${this.token}`;
    axios.get('/api/user').then(response => {
        this.userInfo = response.data
    })
}

Answer 1

I think you should define home url in the blade page you use vue app like this.

<script>
      window.home = "<?php echo your-host-url ?>";
</script>

To make sure the API route is correct you add:

axios.get(window.home + '/api/user').then(response => {
    this.userInfo = response.data
})