How to fix Laravel 8/Vue different domain CORS issue on requests?

Question

Laravel

Good afternoon. I have 2 different domains: api.site.com (laravel 8 sanctum) and site.com (vue).
The API site is run through Open Server through the normal domain (api.site.com). And Vue is launched via (npm run dev/server).
The problem itself is clear to me, but whatever one may say, I can’t solve the problem for a day already. Please tell me where I have not configured correctly.

CORS:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    */
    'paths' => [
        'api/*',
        'sanctum/csrf-cookie',
        'login', 'logout'
    ],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Fortified:

spoiler

<?php

use App\Providers\RouteServiceProvider;
use Laravel\Fortify\Features;

return [

    /*
    |--------------------------------------------------------------------------
    | Fortify Guard
    |--------------------------------------------------------------------------
    */
    'guard' => 'web',

    /*
    |--------------------------------------------------------------------------
    | Fortify Password Broker
    |--------------------------------------------------------------------------
    */
    'passwords' => 'users',

    /*
    |--------------------------------------------------------------------------
    | Username / Email
    |--------------------------------------------------------------------------
    */
    'username' => 'login',
    'email' => 'email',

    /*
    |--------------------------------------------------------------------------
    | Home Path
    |--------------------------------------------------------------------------
    */
    'home' => RouteServiceProvider::HOME,

    /*
    |--------------------------------------------------------------------------
    | Fortify Routes Prefix / Subdomain
    |--------------------------------------------------------------------------
    */
    'prefix' => '',
    'domain' => '',

    /*
    |--------------------------------------------------------------------------
    | Fortify Routes Middleware
    |--------------------------------------------------------------------------
    */
    'middleware' => ['web'],

    /*
    |--------------------------------------------------------------------------
    | Rate Limiting
    |--------------------------------------------------------------------------
    */
    'limiters' => [
        'login' => 'login',
        'two-factor' => 'two-factor',
    ],

    /*
    |--------------------------------------------------------------------------
    | Register View Routes
    |--------------------------------------------------------------------------
    */
    'views' => true,

    /*
    |--------------------------------------------------------------------------
    | Features
    |--------------------------------------------------------------------------
    */
    'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],
];

Axios global component:

import axios from 'axios'
import store from '../store'
import routes from '../routes'

const api = axios.create({
    baseURL: import.meta.env.VITE_API_URL, // http://api.site.com
    withCredentials: true,
})

api.defaults.headers.common['Accept'] = 'application/json';
api.defaults.headers.post['Content-Type'] = 'application/json';

.env (laravel):

APP_URL=http://api.site.com
SESSION_DOMAIN=*.site.com
SANCTUM_STATEFUL_DOMAINS=*.site.com

According to Laravel Sanctum:
I first make a request to sanctum/csrf-cookieand immediately have trouble with CORS:

Access to XMLHttpRequest at 'http://api.site.com/sanctum/csrf-cookie' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If you work through localhost - everything is fine. But then following the login route ( /login) the "CSRF token mismatch" error occurs.

Working through localhost, I'm running laravel through php artisan serveand VUE through npm run dev/serve.

PS: I understand that running vue through localhost and laravel through the domain will cause a CORS error. But how to do it normally - I don’t know =(

Tell me please. I would be very grateful.

Answer 1

Kors will always show an error if you try to make a js request from one to another domain, and not just for localhost.
Put a browser extension, for example Cross Domain - CORS and cut it down there. For local dev it will do, for sale over configure in the server Access-Control-Allow-Origin: *