web-dev-qa-db-fra.com

Laravel Sanctum: bloqué par la stratégie CORS avec le module Nuxt Auth

J'ai un site Web Laravel servi par Valet sur backend.test et un Nuxt SPA sur nuxt.backend.test:3005. Lorsque j'essaye de m'authentifier auprès de Sanctum avec Nuxt Auth module, j'obtiens l'erreur CORS ci-dessous:

L'accès à XMLHttpRequest à ' http: //backend.test/login ' from Origin ' http: //nuxt.backend.test: 3005 ' a été bloqué par la politique CORS : Aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée.

Comment puis-je y remédier?

Configuration de 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"

Configuration 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: '[email protected]',
          password: '1qaz@WSX'
        }
      })
    }
  }
}
</script>
corsnuxt.jslaravel-7laravel-valetlaravel-sanctum
3
DevonDahon

Laravel backend et Nuxt frontend doivent être sous le même domaine, donc je l'ai finalement corrigé en 3 étapes:

1. Ajoutez ceci à /etc/hosts:

127.0.0.1   nuxt.backend.test

2. Utilisation de la version bêta de @nuxt/auth:

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

Dans nuxt.config.js, utilisation:

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

3. En utilisant la configuration ci-dessous:

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

Vous pouvez également remplacer backend.test et nuxt.backend.test par localhost et en supprimant Nuxt serveur Host de nuxt.config.js puis utilisez php artisan serve au lieu de Valet for Laravel c'est bien aussi.

0
DevonDahon