axios请求时更改请求头

原创

mob64ca12eaf194 2023-11-14 10:49:00 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12eaf194的原创作品，请联系作者获取转载授权，否则将追究法律责任

axios请求时更改请求头

在前端开发中，我们经常需要使用 axios 这个库来发送 HTTP 请求。而有时候，我们需要在发送请求时更改请求头，以满足一些特殊的需求。本文将介绍如何使用 axios 来更改请求头，并提供具体的代码示例。

axios 简介

axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。它提供了一些强大的功能，例如拦截请求和响应、转换请求和响应数据、取消请求等等。axios 的优点在于其简洁易用的 API，以及与现代前端框架（如 React 和 Vue.js）的完美结合。

发送请求前更改请求头

要在发送请求前更改请求头，我们需要使用 axios 提供的拦截器。拦截器可以在请求发送前和响应返回后对请求和响应进行修改或处理。

示例代码

下面是一个使用 axios 发送 HTTP 请求并更改请求头的示例代码：

import axios from 'axios';

// 创建一个 axios 实例
const instance = axios.create({
  baseURL: '
});

// 在请求发送前添加一个请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求头中添加自定义的 Authorization 字段
    config.headers.Authorization = 'Bearer YOUR_AUTH_TOKEN';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 发送 GET 请求
instance.get('/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

在上面的代码中，我们首先创建了一个 axios 实例 instance，并将其设置为基本 URL 为 instance.interceptors.request.use` 方法来添加一个请求拦截器。

在请求拦截器中，我们可以修改请求的配置对象 config，例如添加自定义的请求头字段。在上面的示例中，我们在请求头中添加了一个名为 Authorization 的字段，并将其值设置为 Bearer YOUR_AUTH_TOKEN。这样，每次发送请求时，都会在请求头中包含这个字段。

最后，我们使用 instance.get 方法发送一个 GET 请求，并处理响应的数据。注意，在捕获错误时，我们使用了 console.error 输出错误信息。

序列图

下面是一个使用 mermaid 语法标识的序列图，展示了 axios 发送请求并更改请求头的过程：

sequenceDiagram
  participant Client
  participant Axios
  participant Server

  Client->>+Axios: 发送请求
  Axios->>+Server: 发送请求

  activate Axios

  Axios-->>-Server: 修改请求头
  Server-->>+Axios: 返回响应

  deactivate Axios

  Axios-->>-Client: 返回响应

在序列图中，我们可以看到客户端发送请求给 axios，axios 在发送请求给服务器之前，修改了请求头。然后，服务器返回响应给 axios，axios 再返回响应给客户端。