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

Posted 2023-03-28

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

【英文标题】：Axios interceptor token header is present in config but not in request headers

【发布时间】：2018-06-08 03:48:22

【问题描述】：

我创建了 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) 状态来响应我的其余 API，因为我没有发送令牌。

编辑！！！

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

【问题讨论】：

我应该添加有关如何将令牌存储到 vuex 存储的信息吗？我不知道这是否与我的问题有关。

您能否对令牌进行硬编码并查看它是否有效？

不幸的是，当我在拦截器中硬编码令牌时，它没有改变任何东西它仍然具有相同的行为。

【参考方案1】：

我想通了。

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

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

【参考方案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);
    
  );