Laravel Sanctum + Nuxt JS 我无法通过 CORS

Posted 2023-02-27

【中文标题】Laravel Sanctum + Nuxt JS 我无法通过 CORS

【英文标题】：Laravel Sanctum + Nuxt JS I cannot pass CORS

【发布时间】：2020-12-31 02:02:51

【问题描述】：

在开始之前，我想说我搜索并尝试了很多方法，但似乎没有一个可以正常工作。我还创建了一个全新的 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 
  s-s-r: 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 是正确的。

【问题讨论】：

可能与这个问题有关：github.com/fruitcake/laravel-cors/issues/421

我发现了问题，请查看下面的答案。

【参考方案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,
];