Как исправить проблему с CORS разных доменов Laravel 8/Vue при запросах?

Добрый день. Имею 2 разных доменов: api.site.com (laravel 8 sanctum) и site.com (vue).
API-сайт запускается через Open Server через нормальный домен (api.site.com). А Vue запускается через (npm run dev/server).
Проблема сама мне понятна, но как ни крути - проблему не могу решить уже какой день. Подскажите пожалуйста где я не правильно настроил.

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,
];


Fortify:
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:
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


Согласно Laravel Sanctum:
делаю сначала запрос на sanctum/csrf-cookie и уже сразу беда с 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.


Если работать через localhost - всё норм. Но потом переходя по роуту логина (/login) выходит ошибка "CSRF token mismatch".

Работая через localhost я запускаю laravel через php artisan serve и VUE через npm run dev/serve.

PS: Я понимаю, что запуская vue через localhost, а laravel через домен - произойдёт ошибка с CORS. Но как по нормальному сделать - я не знаю =(

Подскажите пожалуйста. Буду очень благодарен.
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 1
Nordic_Alf
@Nordic_Alf
PHP Developer
Корс всегда будет ошибку показывать, если с одного на другой домен пытаешься js-запрос сделать, а не только для локалхоста.
Поставь расширение для браузера, например Cross Domain - CORS и выруби там. Для локалки-дева пойдёт, для прода над настраивать в серваке Access-Control-Allow-Origin: *
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы