Cors problem with subdomain laravel + vuejs

Hello everyone,

I’m developing a multi-tenancy application using Laravel 11 as a REST API and a SPA built with Vue.js 3 (+Pinia +Vue Router). I’m using Sanctum for authentication and TenancyForLaravel for the tenancy part. Since I’m on a Mac, I’m using Laravel Sail.

I’m still not very familiar with the SPA concept. Usually, the SPAs I build are “classic” applications with a single domain.

As a result, I’m stuck with CORS issues on the subdomains that lead to the tenants of the API.

I can’t post a link, so I’ll replace the http with **tp.

Here’s what I have configured:

In my .env file:

SESSION_DOMAIN=.localhost
SANCTUM_STATEFUL_DOMAINS=localhost:5174,.localhost:5174,.localhost,localhost,entreprise1.localhost:5174
ALLOWED_ORIGINS="**tp://localhost:5174,**tp://entreprise1.localhost:5174"

In cors.php:

'paths' => ['api/*'],

'allowed_methods' => ['*'],

'allowed_origins' => array_map('trim', explode(',', env('ALLOWED_ORIGINS', '*'))),

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

In axios.js:

import axios from "axios";

axios.defaults.baseURL = import.meta.env.VITE_APP_URL;
axios.defaults.withCredentials = true;
axios.defaults.withXSRFToken = true;

export default axios;

In my store, where the redirection request to a tenant happens:

async redirectToTenant(tenant) {
    await axios.get('**tp://entreprise1.localhost/api/csrf-cookie');
    // const response = await axiosServices.get('/redirect/'+tenant)
    // window.location.href = response.data.redirect_url
}

API requests from the SPA work fine when made from the main domain. However, redirection requests to the tenants are not working, and I’m getting the following errors: • Cookie “XSRF-TOKEN” has been rejected for invalid domain. (csrf-cookie) • Cookie “laravel_session” has been rejected for invalid domain.

Do you have any idea what I might have done wrong?