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

Question

[Дмитрий Кузнецов]

Добрый день. Имею 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. Но как по нормальному сделать - я не знаю =(

Подскажите пожалуйста. Буду очень благодарен.

Comments

[JhaoDa]

Ошибку ты нам не покажешь, да?

[Дмитрий Кузнецов]

JhaoDa,

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.

выводит если работать через домен (бэк) и локалхост (фронт).

Answer 1

[Nord Dev]

Корс всегда будет ошибку показывать, если с одного на другой домен пытаешься js-запрос сделать, а не только для локалхоста.
Поставь расширение для браузера, например Cross Domain - CORS и выруби там. Для локалки-дева пойдёт, для прода над настраивать в серваке Access-Control-Allow-Origin: *

Comments

[Дмитрий Кузнецов]

Спасибо за совет. Сейчас буду тестить.