Ошибка «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. В зависимости от ваших конкретных настроек и требований вам может потребоваться соответствующим образом изменить примеры кода.