Axios 使用添加 Header 的方案

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它提供了一个易于使用的 API 和自动转换 JSON 数据的功能。在开发过程中，我们经常需要在请求中添加自定义的 header，例如认证令牌（Authorization token）、内容类型（Content-Type）等。本文将介绍如何在 Axios 中添加 header，并提供一个具体的使用场景。

问题描述

假设我们正在开发一个旅行预订网站，用户需要登录后才能进行预订。登录成功后，服务器会返回一个 JWT（JSON Web Token）作为认证令牌。我们需要在每次请求中携带这个令牌，以验证用户的身份。

Axios 添加 Header 的方法

在 Axios 中，我们可以通过以下几种方式添加 header：

  1. 全局配置：为所有请求添加 header。
  2. 实例配置：为特定的 Axios 实例添加 header。
  3. 请求配置：为单个请求添加 header。

全局配置

我们可以在创建 Axios 实例时，使用 defaults.headers 属性来设置全局 header。

import axios from 'axios';

// 创建 Axios 实例
const axiosInstance = axios.create({
  baseURL: '
});

// 设置全局 header
axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;

实例配置

如果需要为特定的 Axios 实例添加 header，可以在实例创建后，使用 defaults.headers 属性进行设置。

// 设置实例 header
axiosInstance.defaults.headers.post['Content-Type'] = 'application/json';

请求配置

对于单个请求，我们可以直接在请求配置中添加 header。

axios.get('/user', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

具体实现

下面是一个使用 Axios 添加 header 的具体实现，包括用户登录和获取用户信息的流程。

import axios from 'axios';

// 创建 Axios 实例
const api = axios.create({
  baseURL: '
});

// 用户登录
async function login(username, password) {
  try {
    const response = await api.post('/login', {
      username,
      password,
    });
    const { token } = response.data;
    // 存储令牌
    localStorage.setItem('token', token);
    // 设置全局 header
    api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  } catch (error) {
    console.error('登录失败:', error);
  }
}

// 获取用户信息
async function getUserInfo() {
  try {
    const response = await api.get('/user');
    console.log('用户信息:', response.data);
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

// 调用登录和获取用户信息的函数
login('username', 'password');
getUserInfo();

用户旅程图

以下是用户在使用我们的旅行预订网站时的旅程图。

journey
  title 用户登录和获取信息的流程
  section 用户输入登录信息
    User: 输入用户名和密码
  section 登录请求
    User->Axios: 发送登录请求
    Axios->Server: 携带用户名和密码
  section 服务器响应
    Server->Axios: 返回令牌
    Axios->User: 存储令牌并设置 header
  section 获取用户信息
    User->Axios: 发送获取用户信息请求
    Axios->Server: 携带 Authorization header
    Server->Axios: 返回用户信息
    Axios->User: 显示用户信息

结语

通过本文的介绍，我们了解了如何在 Axios 中添加 header，并提供了一个具体的使用场景。正确地使用 header 可以提高我们的开发效率，同时也保证了应用程序的安全性。希望本文对您有所帮助。