Axios 标头不起作用 Laravel 和 Vue.js答案

【问题标题】：Axios header doesn't work Laravel and Vue.jsAxios 标头不起作用 Laravel 和 Vue.js
【发布时间】：2021-01-07 18:36:50
【问题描述】：

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

在某人进行身份验证后，我正在创建一个令牌，它进入数据库中的personal_access_token 表。然后我将令牌插入元标记。然后我使用默认 javascript 检索元标记的内容（它有效）并将其设置为 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设置为元标记内容的方式

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

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

我将token设置为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 错误，当我点击它时，我可以在请求标头中看到我的令牌，例如 Authorization: Bearer fd34a554cc5a6f14004f8728735375f980d81053b97f719be5bd504647d786cf

【问题讨论】：

标签： javascript php laravel axios bearer-token

【解决方案1】：

当我使用散列标记作为全局标头时出现错误。

但我已将此行添加到 .env 文件 SANCTUM_STATEFUL_DOMAINS=localhost:8000

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

那个解决方案对我有用。

【讨论】：