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

Posted 2023-02-16

【中文标题】Laravel Sanctum：被带有 Nuxt Auth 模块的 CORS 策略阻止

【英文标题】：Laravel Sanctum : blocked by CORS policy with Nuxt Auth module

【发布时间】：2020-09-18 18:48:11

【问题描述】：

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

从源访问“http://backend.test/login”处的 XMLHttpRequest 'http://nuxt.backend.test:3005' 已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

我该如何解决？

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: '[e-mail]',
          password: '1qaz@WSX'
        
      )
    
  

</script>

【参考方案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'
      
    
  

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

【讨论】：

我正在尝试让 Nuxt 与 Laravel 的 Sanctum 一起使用，但我遇到的问题很少。我想知道您是否有完整的工作示例或我可以使用的代码库？

@xperator 不幸的是没有。我现在正在使用更符合我需求的 Laravel Passport。

啊，我明白了。对我来说，我花了大约 3 天的时间来让基本的登录页面正常工作。现在的问题是，当我启用 auth 中间件时，即使 this.$auth.loggedIn 是 true 并且来自 laravel 端的 api/user/ 返回正确的用户信息，应用程序也会不断重定向到 /login 页面

我想知道 Laravel Passport 是否或多或少是相同的体验..？我只想要一个非常简单的经典用户/密码登录身份验证，不需要花哨的令牌或社交网络身份验证