Laravel Sanctum:使用 Nuxt Auth 模块被 CORS 策略阻止
Laravel Sanctum : blocked by CORS policy with Nuxt Auth module
我有一个由 Valet on backend.test
and a Nuxt SPA on nuxt.backend.test:3005
. When I try to authenticate to Sanctum with Nuxt Auth 模块提供服务的 Laravel 网站,我收到以下 CORS 错误:
Access to XMLHttpRequest at 'http://backend.test/login' from origin
'http://nuxt.backend.test:3005' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
我该如何解决?
Laravel配置
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',
\Illuminate\Routing\Middleware\SubstituteBindings::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: 'me@home.com',
password: '1qaz@WSX'
}
})
}
}
}
</script>
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
替换 backend.test
和 nuxt.backend.test
,并从 nuxt.config.js
中删除 Nuxt 服务器 host
然后使用 php artisan serve
而不是 Valet 因为 Laravel 也可以。
我有一个由 Valet on backend.test
and a Nuxt SPA on nuxt.backend.test:3005
. When I try to authenticate to Sanctum with Nuxt Auth 模块提供服务的 Laravel 网站,我收到以下 CORS 错误:
Access to XMLHttpRequest at 'http://backend.test/login' from origin 'http://nuxt.backend.test:3005' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我该如何解决?
Laravel配置
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',
\Illuminate\Routing\Middleware\SubstituteBindings::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: 'me@home.com',
password: '1qaz@WSX'
}
})
}
}
}
</script>
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
替换 backend.test
和 nuxt.backend.test
,并从 nuxt.config.js
中删除 Nuxt 服务器 host
然后使用 php artisan serve
而不是 Valet 因为 Laravel 也可以。