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 存储中，并且在我执行注销功能（调用 rest API）后它会控制台输出配置（拦截器的一部分）。

结果我有 400 (Bad request) 状态响应我的rest API，因为我没有发送令牌。

编辑！！！

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

Answer 1

我想到了。

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

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

Answer 2

您还可以在过期时操纵对清理令牌的响应。

  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    if (401 === error.response.status) {
      console.log("Session Expired")
      //window.location = '/login'
    } else {
      return Promise.reject(error);
    }
  });