拉拉维尔·桑克图姆:被CORS与Nuxt Auth模块的政策封锁
拉拉维尔·桑克图姆:被CORS与Nuxt Auth模块的政策封锁
提问于 2020-05-31 11:50:43
我有一个Laravel网站，代客在backend.test上服务，Nuxt SPA在nuxt.backend.test:3005上。当我试图使用圣殿模块对努克斯特进行身份验证时，我会在下面得到CORS错误：
CORS策略阻止从源'http://backend.test/login‘访问http://backend.test/login 'http://nuxt.backend.test:3005’：请求的资源上不存在“访问控制-允许-原产地”标题。
我怎么才能修好它？
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-03 06:31:34
Laravel后端和Nuxt前端必须位于相同的域中，因此我最终分三个步骤修复了它：
1.将此添加到/etc/hosts中
127.0.0.1 nuxt.backend.test2.使用@nuxt/auth的beta版本
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'
}
}
}
}或者，将backend.test和nuxt.backend.test替换为localhost，并从nuxt.config.js中删除Nuxt服务器host，然后使用php artisan serve代替ValetE 220用于E 121LaravelE 222。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62115781
复制相关文章
相似问题
腾讯云开发者
