web-dev-qa-db-ja.com

Laravel Sanctum：Nuxt AuthモジュールのCORSポリシーによってブロックされました

LaravelのWebサイトを提供しています Valet がbackend.testおよびNuxtSPAをnuxt.backend.test:3005。 Sanctum を Nuxt Auth モジュールで認証しようとすると、以下のCORSエラーが発生します。

Origin ' http：//nuxt.backend.test：3005 'から ' http：//backend.test/login 'でのXMLHttpRequestへのアクセスは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: '[email protected]',
          password: '1qaz@WSX'
        }
      })
    }
  }
}
</script>
corsnuxt.jslaravel-7laravel-valetlaravel-sanctum
3
DevonDahon

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 server Hostをnuxt.config.jsから削除してから、php artisan serveValetの代わりにLaravelでもかまいません。

0
DevonDahon