vue.js - 为 Laravel sanctum 获取 401 未授权

Question

我正在将 Laravel Sanctum 与 Vuejs SPA 一起使用。两者都驻留在同一个顶级域中

Laravel backend : app.demo.localhost
Vue SPA : app-spa.demo.localhost

当使用 axios 从 VueJS SPA 调用时登录和注销(端点)工作正常，并且 XSRF-TOKEN 已成功设置，但是当我调用其他 api 端点时，它给了我 401 未经授权。

在 axios 中，这是设置

axios.defaults.withCredentials = true;

我有以下配置

在 Laravel .env 中

SESSION_DRIVER=cookie
SESSION_DOMAIN=.demo.localhost
SANCTUM_STATEFUL_DOMAINS=app-spa.demo.localhost

在路由/Api.php

Route::middleware('auth:sanctum')->get('api/user', function (Request $request) {
   return $request->user();
});

在 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,

有人可以帮我吗？

Answer 1

如果您使用 php artisan serve，请将端口号添加到 SANCTUM_STATEFUL_DOMAINS。因此，如果您的端口号是 8000:

SESSION_DRIVER=cookie
SESSION_DOMAIN=.demo.localhost
SANCTUM_STATEFUL_DOMAINS=app-spa.demo.localhost:8000

您的 SANCTUM_STATEFUL_DOMAINS 必须与浏览器中的 url 匹配。端口号不应在 SESSION_DOMAIN 上。