Laravel Sanctum + Nuxt JS 我无法通过 CORS

Question

在开始之前，我想说我搜索并尝试了很多方法，但似乎没有一个能正常工作。我还创建了一个新的 Laravel 安装，但仍然没有成功。

问题是CORS，我总是被CORS阻止。

• 设置使用

  Laravel Valet

  。
• Laravel 应用程序运行于

  https://sanctum.test

• NuxtJs 应用程序运行于

  https://nuxt.sanctum.test

这是全新安装。

我的

.env

文件具有所需的设置：

SESSION_DOMAIN=.sanctum.test  
SANCTUM_STATEFUL_DOMAINS=sanctum.test,nuxt.sanctum.test

我的

cors.php

具有所需的设置：

...
    'supports_credentials' => true,
...

我的

Http/Kernel.php

...
        'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

我的 NuxtJs 应用程序在 http://localhost:3000 上运行，我有一个 Laravel Valet 反向代理，因此我可以从

https://nuxt.sanctum.test

访问它，我可以确认它按预期工作。

这是我的

nuxt.config.js

：

export default {
  ssr: false,

  target: 'server',

  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  css: [],

  plugins: [],

  components: true,

  buildModules: ['@nuxtjs/eslint-module', '@nuxtjs/tailwindcss'],

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

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'https://sanctum.test',
      },
      cookie: {
        cookie: {
          name: 'XSRF-TOKEN',
        },
      },
    },
  },

  router: {
    middleware: ['auth'],
  },

  axios: {
    proxy: true,
    credentials: true,
  },
  proxy: {
    '/laravel': {
      target: 'https://sanctum.test',
      pathRewrite: { '^/laravel': '/' },
    },
  },

  build: {},
}

现在，无论我做什么，我总是从 Laravel 应用程序中得到相同的错误：

Access to XMLHttpRequest at 'https://sanctum.test/sanctum/csrf-cookie' from origin 'https://nuxt.sanctum.test.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如上所示，请求是从子域发送到主域的。正如我上面所示，

SANCTUM_STATEFUL_DOMAINS

是正确的。

Answer 1

睡了一夜才发现问题！

我缺少附加端点的

config/cors.php

配置：

<?php

return [
    'paths' => ['api/*', 'sanctum/*', 'login', 'logout'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,
];

Answer 2

就我而言，我错过了在 Laravel 应用程序的

SANCTUM_STATEFUL_DOMAINS

文件中添加

.env

，如下所示。

SANCTUM_STATEFUL_DOMAINS=http://localhost:3000

如果你去 config/sanctum.php 你会看到一个变量

SANCTUM_STATEFUL_DOMAINS