У меня ошибка CORS, когда я пытаюсь использовать https://tenancyforlaravel.com/ с next.

Содержание

Вопрос или проблема
Ответ или решение
Решение
Дополнительные рекомендации

Вопрос или проблема

Я пытаюсь создать многопользовательское приложение на Laravel 11 с Next.js на фронтенде и сталкиваюсь с этой проблемой, когда хочу использовать

 const response = await axios.post<LoginResponse>(
        "http://test1.localhost:8000/login",
        {
          email,
          password,
        }
      );

выдает ошибку CORS

Доступ к XMLHttpRequest по адресу ‘http://test1.localhost:8000/login’ с источника ‘http://localhost:3000’ был заблокирован политикой CORS: Ответ на предварительный запрос не прошел проверку контроля доступа: отсутствует заголовок ‘Access-Control-Allow-Origin’ в запрашиваемом ресурсе.

но когда я отправляю запрос на http://localhost:8000, все работает нормально

Я решил проблему, добавив маршрут для входа в cors.php

return [

/*
|--------------------------------------------------------------------------
| Настройки общего использования ресурсов между разными источниками (CORS)
|--------------------------------------------------------------------------
|
| Здесь вы можете настроить параметры для общего использования ресурсов между разными источниками
| или "CORS". Это определяет, какие операции между источниками могут выполняться
| в веб-браузерах. Вы можете настроить эти параметры по мере необходимости.
|
| Чтобы узнать больше: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/

'paths' => ['api/*','login', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,

];

Ответ или решение

Для решения проблемы с CORS, с которой вы столкнулись при использовании Laravel 11 в связке с Next.js, вам необходимо внести изменения в настройки CORS вашего приложения Laravel. Ошибка CORS (Cross-Origin Resource Sharing) указывает на то, что браузер блокирует запросы к ресурсам из другого источника, если они не настроены должным образом.

В вашем случае, когда вы посылаете запрос к http://test1.localhost:8000/login, браузер блокирует запрос из-за отсутствия заголовка Access-Control-Allow-Origin в ответе от сервера. Это связано с тем, что ваше приложение Next.js запущено на http://localhost:3000, и браузер считает его другим источником по сравнению с http://test1.localhost:8000.

Решение

Для устранения этой проблемы вам потребуется правильно настроить файл cors.php в вашем приложении Laravel. Вот шаги, которые нужно выполнить:

Откройте файл конфигурации CORS:

Файл конфигурации CORS обычно находится по пути config/cors.php.

Измените настройки CORS:

Внутри этого файла вам нужно убедиться, что указаны правильные параметры, чтобы разрешить запросы с вашего фронтенд-приложения. Ваши настройки CORS должны выглядеть следующим образом:

return [
   /*
   |--------------------------------------------------------------------------
   | Cross-Origin Resource Sharing (CORS) Configuration
   |--------------------------------------------------------------------------
   |
   | Here you may configure your settings for cross-origin resource sharing
   | or "CORS". This determines what cross-origin operations may execute
   | in web browsers. You are free to adjust these settings as needed.
   |
   | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
   |
   */

   'paths' => ['api/*', 'login', 'sanctum/csrf-cookie'],

   'allowed_methods' => ['*'],

   'allowed_origins' => ['http://localhost:3000'], // Примечание: используйте конкретный источник, если возможно.

   'allowed_origins_patterns' => [],

   'allowed_headers' => ['*'],

   'exposed_headers' => [],

   'max_age' => 0,

   'supports_credentials' => false,
];

Важно: В разделе allowed_origins вы можете указать конкретный источник (http://localhost:3000), с которого будут разрешены запросы. Это повысит безопасность, поскольку использование [*] открывает доступ для всех источников.

Очистите кеш конфигурации:

После того как вы внесли изменения в конфигурацию, вам нужно очистить кеш конфигурации:
```
php artisan config:cache
```
Проверка:

Попробуйте снова выполнить запрос к вашему API. Если всё настроено правильно, ошибка CORS больше не должна возникать.

Дополнительные рекомендации

Убедитесь, что ваш локальный сервер Laravel запущен на http://test1.localhost:8000 и корректно обрабатывает запросы.
Если вы используете middleware, убедитесь, что middleware CORS зарегистрировано и применяется к вашим маршрутам.
Если у вас возникают дальнейшие проблемы, проверьте настройки вашего сервера (например, Nginx или Apache) на предмет дополнительных ограничений по CORS.

Следуя этим шагам, вы сможете устранить проблему с CORS и успешно взаимодействовать между вашим приложением Next.js и API на Laravel.