Axios header 不工作 Laravel 和 Vue.js

Question

我正在使用 Laravel 的 Sanctum 库来验证我的 API，但它不起作用，一切似乎都是故意的。

我在有人验证后创建一个令牌，它进入数据库中的 personal_access_token table。然后我将令牌插入到元标记中。然后我使用默认 javascript 检索元标记的内容（有效）并将其设置为全局授权 header 到 bootstrap.js 文件中的 Axios。

使用解密的不记名令牌时，此方法有效。但是当我开始使用 personal_access_token 上的默认 token 列时，它不起作用。

我定义令牌的方式

protected function authenticated(Request $request, $user)
    {
        $user->access_token = $user->createToken('api-token')->plainTextToken;

        return $request->wantsJson() ? response()->json($user, 200) : redirect()->intended('/students');
    }

效果很好。它会在有人验证后插入新令牌。

我将token设置为metatag内容的方式

<meta name="access-token" content="{{auth()->user()->tokens()->first()->token}}" />

我检查的时候可以看到token，是这样的：fd34a554cc5a6f14004f8728735375f980d81053b97f719be5bd504647d786cf

我设置token为全局的方式header到Axios

let metatag = document.querySelector('meta[name="access-token"]').content;

window.axios = require('axios');

axios.defaults.headers.common['Authorization'] = `Bearer ${metatag}`;

在我切换到 personal_access_table 之前，这没有问题。当我使用像 6|yqbI....

这样的标记时，这种方法很有效

现在返回 401 错误，当我点击它时，我可以在请求 Headers

中看到我的令牌，如 Authorization: Bearer fd34a554cc5a6f14004f8728735375f980d81053b97f719be5bd504647d786cf

Answer 1

当我将散列令牌用作全局时 header 我遇到了错误。

但是我已经将这一行添加到 .env 文件中 SANCTUM_STATEFUL_DOMAINS=localhost:8000

由于我的本地主机有一个端口，我需要在 .env 文件中手动定义它

那个解决方案对我有用。

Axios header 不工作 Laravel 和 Vue.js

Axios header doesn't work Laravel and Vue.js

javascript

php

laravel

bearer-token

axios