Axios 拦截器令牌标头存在于配置中，但不存在于请求标头中

我创建了 axios 拦截器，它负责在每个请求发送到我的其余 API 之前添加令牌。

import axios from 'axios';
import { store } from '../store/store';

export default function execute() {
    axios.interceptors.request.use(function(config) {
        const token = store.state.token;
        if(token) {
            config.headers.Authorization = `Bearer ${token}`;
            console.log(config);
            return config;
        } else {
            console.log('There is not token yet...');
            return config;
        }
    }, function(err) {
        return Promise.reject(err);
    });
}

正如您在第 2 行中看到的，我正在导入 vuex 存储，这实际上是我的代币存放的地方。在第 8 行中，我实际上将此标记添加到config对象，然后在下一行我安慰它。

它在我的 main.js 文件中执行，如下所示：

import interceptor from './helpers/httpInterceptor.js';
interceptor();

该令牌存在于我在控制台中看到的配置对象中（因为我控制台config目的）：

每次我按预期向 REST API 发出一些请求时，它都会运行。如果令牌存在（登录后），它应该向每个请求添加令牌标头。不幸的是，尽管它存在于配置对象上，但它没有添加它，这让我有点困惑。

正如我在网络选项卡中看到的那样，它实际上并未将令牌添加到实际请求中：

当然，这个屏幕截图是在登录后拍摄的，因此令牌已经在 vuex 存储中，并且在我执行注销函数（调用 REST API）后，它控制台了配置（拦截器的一部分）。

结果，我的其余 API 响应为 400（错误请求）状态，因为我没有发送令牌。

EDIT!!!

我在想我可以在这个问题中添加什么来使它变得更好。我认为创建演示插件是不可能的，所以我决定创建一点存储库 https://bitbucket.org/dopeCode/axiosinterceptor您可以下载演示并亲眼看到问题。我希望它能帮助解决问题！

我想到了。

我不知道有一种叫做预检请求的东西，它是在真正请求 REST API 之前执行的。如果预检请求失败，它将不会接受/接收更多标头。这就是为什么我在 Chrome 控制台网络选项卡中没有看到它的实际请求，但它在配置对象中console.log在拦截器中编辑。

与存储库演示相同，它调用不存在的 URL，因此预检请求也在那里失败。在创建这个演示时，我不知道存在预检请求之类的东西，所以我确信调用一些现有的 URL 端点或虚构的端点并不重要，我认为通过这两种方式我应该能够看到那里的请求标头。