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

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 object 中，然后在下一行中，我正在安慰它。

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

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

令牌存在于我在控制台中看到的配置 object 中（因为我安慰 config object）：

它会在我每次按预期要求休息时运行 API。如果令牌存在（登录后），它应该向每个请求添加令牌 header。不幸的是，它没有添加它，尽管它存在于配置 object 中，这让我有点困惑。

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

这个屏幕截图当然是在登录后拍摄的，所以令牌已经在 vuex 存储中，并且它在我执行注销功能（调用 rest API）后控制台输出配置（拦截器的一部分）。

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

编辑！！！

我在想我可以为这个问题添加什么来让它变得更好。我认为创建演示 plunker 是不可能的，所以我决定创建一个小的 repository 演示，您可以下载并查看问题。希望对解决问题有所帮助！

Answer 1

我想出来了

我不知道有一种叫做预检请求的东西在真正请求休息之前执行 API。如果预检请求失败，它不会 accept/receive 更多 headers。这就是为什么我没有在 chrome 控制台网络选项卡中根据实际请求看到它，而是在配置 object 中 console.log 在拦截器中编辑。

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

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);
    }
  });

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

Axios interceptor token header is present in config but not in request headers

javascript

http

interceptor

axios

vuejs2