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 对象):

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 存储中，它在我执行注销函数(调用 rest 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(错误的请求)状态来响应我的 REST API，因为我没有发送令牌.

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

编辑！！！

我在想我可以向这个问题添加什么以使其更好.我认为这是不可能创建演示 plunker 所以我决定创建小的 repository 演示，您可以下载和看看你的眼睛问题.希望对解决问题有所帮助！

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.loged 的配置对象中.

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屋！