Методы устранения ошибки CORS в Nuxt.js 3 с помощью Laravel Sanctum

Ошибка «nuxt 3 laravel Sanctum Cors error» обычно возникает при работе с Nuxt.js 3, Laravel и Sanctum и связана с проблемами совместного использования ресурсов между источниками (CORS). CORS – это механизм безопасности, который ограничивает запросы, сделанные с веб-страницы, другим доменом.

Существует несколько способов устранения ошибки CORS при использовании Nuxt.js 3, Laravel и Sanctum. Вот несколько подходов с примерами кода:

Метод 1: настройка заголовков CORS в Laravel
В вашем бэкэнде Laravel вы можете настроить заголовки CORS, чтобы разрешать запросы из вашего интерфейса Nuxt.js. Добавьте следующий код в файл app/Http/Middleware/VerifyCsrfToken.phpвашего проекта Laravel:

protected $except = [
    'sanctum/csrf-cookie',
];

Метод 2: настройка CORS в Nuxt.js
В проекте Nuxt.js 3 вы можете настроить модуль axios для включения необходимых заголовков для запросов между источниками. Создайте или измените файл nuxt.config.jsв корневом каталоге вашего проекта и добавьте следующий код:

export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'http://your-laravel-backend-url',
    credentials: true,
  },
}

Метод 3: создание промежуточного программного обеспечения в Nuxt.js
Вы можете создать собственное промежуточное программное обеспечение в своем проекте Nuxt.js для решения проблемы CORS. Создайте новый файл с именем cors.jsв папке middlewareи добавьте следующий код:

export default function ({ $axios }) {
  $axios.onRequest((config) => {
    config.headers.common['Access-Control-Allow-Origin'] = '*';
    config.headers.common['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE';
    config.headers.common['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept';
  });
}

Затем добавьте промежуточное ПО в файл nuxt.config.js:

export default {
  router: {
    middleware: 'cors',
  },
}

Это всего лишь несколько способов устранения ошибки CORS в контексте Nuxt.js 3, Laravel и Sanctum. В зависимости от ваших конкретных настроек и требований вам может потребоваться соответствующим образом изменить примеры кода.