首页 > 解决方案 > Laravel sanctum SPA - 此 set-cookie 域属性对于当前主机 url 无效

问题描述

我在单独的项目中有一个 VueJS 应用程序和一个 Laravel API。我有一些问题要与 laravel sanctum 进行身份验证。我的 VueJs 在 localhost:8080 和我的 API 在 localhost:8000

当我尝试设置 cookie 时,出现“此 set-cookie 域属性对于当前主机 url 无效”问题

我认为 laravel 无法设置 cookie,当我尝试进行身份验证时,他返回了 419 错误状态,这意味着令牌不匹配。

我的配置/cors.php

   'paths' => [
        'api/*',
        'sanctum/csrf-cookie',
        'login',
        'logout'
    ],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

我遵循 laravel 文档。

将这些行添加到我的 app/Http/Kernel.php

use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

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

我在我的 vue 应用程序中激活了 axios 凭据

axios.defaults.withCredentials = true;

我设置了我的 SESSION_DOMAIN=localhost:8080。

在我的 VueJS 登录组件中:

       axios
          .get('/sanctum/csrf-cookie')
          .then(response => {
            axios.post('/login', {
              email : 'alexandria96@example.com',
              password : 'password'
            }).then(response => {
                console.log('User signed in!');
            }).catch(error => console.log(error)); // credentials didn't match
      });

在此处输入图像描述

csrf-cookie 的请求在 此处输入图片描述

登录请求 在此处输入图像描述

标签: laravel-sanctum

解决方案


在登录之前,您必须检查是否设置了 cookie。您的 cookie 未设置,这就是您出现 419 错误的原因。尝试从配置中删除端口。尝试

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost

现在检查 cookie。对我来说工作。


推荐阅读