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

Question

我创建了axios拦截器,负责在每个请求发送到我的rest 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对象):

每当我按预期提出一些API请求时,它就会运行.如果存在令牌(登录后),它应该为每个请求添加令牌头.不幸的是它没有添加它,虽然它存在于配置对象上,这让我有点困惑.

它实际上并没有将令牌添加到实际请求,因为我可以在网络选项卡中看到:

这个屏幕截图当然是在登录后进行的,因此令牌已经在vuex存储中,并且在我执行注销功能(调用其余API)之后它安慰了config(拦截器的一部分).

结果我有来自我的其余API的400(错误请求)状态,因为我没有发送令牌.

编辑!!!

我在想什么可以添加到这个问题,以使其更好.我认为创建demo plunker是不可能的,所以我决定创建一个小的存储库演示,您可以下载并查看问题.我希望它有助于解决问题!

Answer 1

我想到了。

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

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