Axios拦截器令牌头存在于配置中，但不存在于请求头中 [英] Axios interceptor token header is present in config but not in request headers

问题描述

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

I've created axios interceptor which is responsible for adding token before every request is send to my 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 对象中，然后在下一行我安慰它。

As you can see in line 2 I'm importing vuex storage and this is actually place where my token is deposited. In line 8 I'm actually adding this token to config object and then in next line I'm consoling it out.

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

It is executed in my main.js file like so:

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

令牌出现在我在控制台中看到的配置对象中（因为我安慰 config object）：

The token is present in config object which I see in my console (because i consoled config object):

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

It runs every time that I make some request to rest API as expected. If token exist (after login) it should add token header to every request. Unfortunately it doesn't add it although it is present on config object which makes me a bit confused.

它实际上并没有将令牌添加到真实请求，因为我可以看到在网络标签中：

It doesn't actually add token to real request as I can see in network tab:

此屏幕截图当然是在登录后拍摄的因此令牌已经在vuex存储中，并且在我执行注销功能（调用其余API）之后它安慰了配置（拦截器的一部分）。

This screenshot is of course taken after login so the token is already in vuex storage and it consoled out config (part of interceptor) after I executed logout function (which call rest API).

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

In result I have 400 (Bad request) status in response from my rest API because I didn't sent token.

编辑!!!

我在想是什么可以添加到这个问题中以使其更好。我认为创建demo plunker是不可能的，所以我决定创建一些你可以下载的存储库演示。看你眼睛的问题。我希望它有助于解决问题！

I was thinking what can I add to this question to make it better. I think that this is impossible to create demo plunker so I decided to create little repository demo which you can download and see issue for your eyes. I hope it'll help to solve the problem!

推荐答案

我弄明白了。

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

I didn't know that there is something called preflight request which is executed before real request to rest API. If preflight request fail it will not accept/receive more headers. This is why I didn't see it on real request in chrome console network tab but it was in config object which was console.loged in interceptor.

在存储库演示中也是如此，它调用的不是现有的URL，因此预检请求也失败了。在创建这个演示时，我不知道预检请求存在这样的事情，所以我确信如果我会调用一些现有的URL端点或虚构的端点并不重要，我认为这两种方式我应该能够看到请求标题。

Same in repository demo which was calling not existing URL so preflight request failed there as well. While creating this demo I had no idea that such thing as preflight request exist so I was sure that it doesn't matter if I'll call some existing URL endpoint or fictitious one, I thought that in both way I should be able to see request header there.

这篇关于Axios拦截器令牌头存在于配置中，但不存在于请求头中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！