javascript - 无法在 axios 上添加授权 header

Question

我面临一个奇怪的问题，我的 httpClient 没有添加 axios header 。我的httpClient.js

import axios from "axios";
import logHandler from "../utils/logService";

axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// axios.defaults.headers.common["Authorization"] = "Bearer "+ localStorage.getItem('_token');

let client = axios.create({
    baseURL: 'http://laracms.test/api'
});

axios.interceptors.response.use(null, (error) => {
    const expectedError =
        error.response &&
        error.response.status >= 400 &&
        error.response.status < 500;

    if (!expectedError) {
        logHandler.log(error);
    }

    return Promise.reject(error);
});

function setJwt(token) {
    console.log('called setJWt >>', token);
    axios.defaults.headers.common["Authorization"] = "Bearer "+ token;
}

export default {
    get: client.get,
    post: client.post,
    put: client.put,
    delete: client.delete,
    setJwt
};

还有我的authService.js看起来像:

// import { apiURL } from "../config/config.json";
import httpClient from "../utils/httpClient";

 const apiURL = "http://laracms.test/api"

const apiEndpoint = apiURL + "/auth";
const tokenKey = "_token";

httpClient.setJwt(getJwt());

export async function register(user) {
    return httpClient.post(apiEndpoint + "/register", {
        name: user.name,
        email: user.email,
        password: user.password,
    });
}

export async function verify(activation_code) {
    return httpClient.get(apiEndpoint + "/verify-email/" + activation_code);
}

export async function login(email, password) {
    const response = await httpClient.post(apiEndpoint + "/login", {
        email,
        password,
    });
    const token = response.headers["x-auth-token"];
    localStorage.setItem(tokenKey, token);
    return response;
}

export function getCurrentUser() {
    try {
        const jwt = localStorage.getItem(tokenKey);
        return jwtDecode(jwt);
    } catch (ex) {
        return null;
    }
}

export function logout() {
    localStorage.removeItem(tokenKey);
}

export function getJwt() {
    if(tokenKey in localStorage){
        return localStorage.getItem(tokenKey);
    }
    return null;
}

export default {
    verify,
    login,
    logout,
    getCurrentUser,
    getJwt,
};

尽管如此，我可以清楚地看到 setJwt被召唤

但是，如果我取消注释 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 下面的行它也在发送授权 header 。可能，这并不重要，但只是为了我使用 Laravel 8 作为后端的信息。

Answer 1

您正在 axios.create(... 创建一个 axios 实例并且您正在使用该实例作为客户端，当您设置授权 header 时，您将其设置为“axios defaults”而不是之前创建的实例。将 header 添加到 setJWT 函数中的 axios 实例中，这应该可行