Axios nuxt.js/laravel CORS?

CORS (Cross-Origin Resource Sharing) - это политика безопасности, которая применяется веб-браузерами, чтобы определить, имеет ли веб-страница право запросить ресурсы с другого источника (домена, порта или протокола). Если веб-приложение развернуто на одном домене, а API-сервер (например, Laravel) на другом домене, браузеры по умолчанию блокируют такие запросы из соображений безопасности.

Когда речь идет о Nuxt.js и Laravel, можно использовать библиотеку Axios, чтобы взаимодействовать с API-сервером. Для обработки CORS-запросов в Laravel, вам необходимо настроить опции CORS на вашем сервере Laravel. Затем вы можете настроить Axios в Nuxt.js для отправки запросов на этот сервер.

Вот пример, как настроить CORS в Laravel:

1. Установите библиотеку "fruitcake/laravel-cors" с помощью Composer:

composer require fruitcake/laravel-cors

2. Опубликуйте файл конфигурации:

php artisan vendor:publish --tag="cors"

3. Откройте файл config/cors.php и настройте правила CORS:

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

4. Примените правила CORS, добавив Middleware в ваш файл app/Http/Kernel.php:

protected $middlewareGroups = [
    'web' => [
        // ...
        FruitcakeCorsHandleCors::class,
    ],

    'api' => [
        // ...
        FruitcakeCorsHandleCors::class,
    ],
];

После настройки CORS на сервере Laravel, вам нужно настроить Axios в Nuxt.js для отправки запросов на API-сервер. Это можно сделать, добавив следующий код в файл nuxt.config.js:

export default {
  // ...
  axios: {
    baseURL: 'http://ваш_домен_или_IP/api/', // URL вашего API-сервера
    credentials: true, // разрешить использовать cookie
    proxyHeaders: false, // не отправлять заголовки на сервер
  },
  // ...
}

Это настроит Axios таким образом, чтобы он отправлял запросы на ваш API-сервер и разрешал использование cookie для аутентификации или других целей. Также установка proxyHeaders в false предотвратит отправку заголовков Nuxt к API-серверу, что может вызвать проблемы с CORS.

В итоге, настройка CORS между Nuxt.js и Laravel обеспечивает безопасное и правильное взаимодействие между клиентской и серверной частями вашего приложения.