Как побороть проблему CORS в Laravel?

Question

[iFortunes]

Версия Laravel 10.

'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,

Настройки axios:

const axiosInstance = Axios.create({
    withCredentials: false,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'multipart/form-data; boundary=something',
        'Accept': 'application/json',
        'Application': 'application/json',
        // 'Authorization': 'Bearer ' + localStorage.getItem('token'),
    },

Локально всё работает, залил на vps и получаю ошибку - has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

По какой причине может выпадать эта ошибка?

Comments

[Rsa97]

Смотрите в консоли браузера, какие заголовки возвращаются от сервера, в том числе и на запросы OPTIONS.

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

supports_credentials => true

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

Как происходит запрос? С разных доменов/поддоменов?

[iFortunes]

Дмитрий Кузнецов, Да, разные домены.

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

Чем пользуетесь для запросов со стороны Laravel (Sanctum?)?
withCredentials в js и supports_credentials в laravel - Должны быть true. Для начала это поправьте. А дальше посмотрим что у вас там.

[iFortunes]

Дмитрий Кузнецов, Да, санктум, supports_credentials исправил на true и в axios так же на true поменял. Вся та же ошибка.

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

Продемонстрируйте env файл в laravel с настройками sanctum

[iFortunes]

Дмитрий Кузнецов, Ммм, так у меня нет там настроек санктума

[iFortunes]

Я заметил странное поведение, иногда запрос проходит и сервер возвращает заголовки и результат, второй раз нажимаешь и снова ошибка CORS

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

Прочтите и следуйте инструкциям с оф. доки: https://laravel.com/docs/10.x/sanctum#spa-configuration

На счёт причин - сложно ответить. Мы не знаем что и как вы настроили. Нужно видеть код.

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

И если я правильно понял, то ваше frontend приложение работает как-то через localhost, судя по access-control-allow-origin, а запросы посылает на другой домен. Соответственно могут быть проблемы.

Возможно вам придётся прокидывать прокси между приложениями.

[iFortunes]

Дмитрий Кузнецов, Да, у меня вертится приложение vue-cli на локалхосте и там пытаюсь найти причину ошибки. Дело в том, что когда приложение выкладываю на другой домен, там точно такая же ошибка. Я прокидывал прокси, всё работает на локалхосте но я не уверен, что это хорошая идея, возможно ошибаюсь.

В документации я заметил, что забыл в axios добавить axios.defaults.withXSRFToken = true; Добавил и началось это странное поведение как на локалхосте так и на домене. Один запрос проходит успешно, второй выбивает ошибку. Причём между успешными запросами должно пройти какое-то время.

[iFortunes]

Думаю, я напортачил с настройками nginx

[iFortunes]

Дмитрий Кузнецов, Да, Дмитрий, спасибо большое за помощь, разобрался. Это была проблема в nginx.