Laravel Sanctum :被带有Nuxt Auth模块的CORS策略阻止

Question

我有一个由 Valet在backend.test上提供的 Laravel 网站，在nuxt.backend.test:3005上有一个NuxtSPA 服务。当我尝试使用Nuxt Auth模块向Sanctum进行身份验证时，出现以下CORS错误：

从源头访问 XMLHttpRequest at 'http://backend.test/login' "http://nuxt.backend.test:3005"已被 CORS 策略阻止：否 "访问控制允许源"标头存在于请求的上 资源。

我该如何解决？

拉拉维尔配置

config/cors.php：

<?php
return [
'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
];

routes/api.php：

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});

app/Http/Kernel.php：

protected $middlewareGroups = [
...
'api' => [
EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
IlluminateRoutingMiddlewareSubstituteBindings::class,
],
];

.env：

SANCTUM_STATEFUL_DOMAINS="backend.test"
SESSION_DOMAIN=".backend.test"

Nuxt 配置nuxt.config.js：

export default {
server: {
port: '3005',
host: 'nuxt.backend.test'
},
...
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth-next'
],
axios: {
proxy: true
},
proxy: {
'/nuxt': {
target: 'nuxt.backend.test',
pathRewrite: { '^/nuxt': '/' }
}
},
auth: {
redirect: {
callback: '/auth/callback'
},
strategies: {
laravelSanctum: {
provider: 'laravel/sanctum',
url: 'http://backend.test'
}
}
},
...
}

pages/index.php：

<template>
<div>
<div>
<pre>{{ $auth.user }}</pre>
</div>
<button @click="signIn()">Sign in</button>
</div>
</template>
<script>
export default {
methods: {
signIn() {
this.$auth.loginWith('laravelSanctum', {
data: {
email: '[e-mail]',
password: '1qaz@WSX'
}
})
}
}
}
</script>

Answer 1

Laravel后端和Nuxt前端必须在同一域下，所以我最终通过3个步骤修复了它：

1. 将此添加到/etc/hosts：

127.0.0.1   nuxt.backend.test

2. 使用测试版@nuxt/auth：

npm remove @nuxtjs/auth
npm install @nuxtjs/auth-next @nuxtjs/axios

在nuxt.config.js中，使用：

modules: [
'@nuxtjs/axios',
'@nuxtjs/auth-next'
],

3. 使用以下配置：

{
axios: {
proxy: true
},
proxy: {
'/laravel': {
target: 'http://backend.test',
pathRewrite: { '^/laravel': '/' }
}
},
auth: {
strategies: {
laravelSanctum: {
provider: 'laravel/sanctum',
url: '/laravel'
}
}
}
}

或者，通过localhost并从nuxt.config.js中删除Nuxt服务器host来替换backend.test和nuxt.backend.test，然后使用php artisan serve而不是代客来代替Laravel也可以。