Axios 中如何设置请求头（headers）

在使用 Axios 发送请求时，Headers 是一个重要的配置选项，它允许我们在请求中添加自定义的 HTTP 头部信息，如授权信息、用户代理、内容类型等。在本文中，我们将重点介绍 Axios 的 headers（请求头）如何使用。

Headers 概念

在发送 HTTP 请求时，headers 是一组键值对，用于传递元数据给服务器。这些 headers 可以包含认证信息、内容类型、缓存控制等。Axios 允许我们在请求中设置这些 headers，以实现特定的功能或满足服务器的要求。

常见的请求头

在使用 Axios 的 headers 时，有一些常见的请求头需要了解。以下是其中一些常见的请求头：

Content-Type

Content-Type 请求头指定了请求体的媒体类型。常见的值包括：

application/json: 表示请求体是 JSON 格式的数据。
application/x-www-form-urlencoded: 表示请求体采用 URL 编码的表单数据。

示例：

axios.post('/api/user', {
  name: 'John',
  age: 25
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})

Authorization

Authorization 请求头用于在发送请求时进行身份验证，通常在需要访问受保护资源时使用。它的值通常包含访问令牌或用户名密码。

示例：

axios.get('/api/user', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

User-Agent

User-Agent 请求头包含了发起请求的用户代理信息，用于标识请求的客户端类型、操作系统和版本等信息。

示例：

axios.get('/api/user', {
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36'
  }
})

Accept

Accept 请求头用于指定客户端能够接收的响应内容类型。服务器可以根据该头部来返回合适的响应内容。

示例：

axios.get('/api/user', {
  headers: {
    'Accept': 'application/json'
  }
})

常见设置请求头的方法

1）axios.defaults.headers：全局设置默认的请求头，对所有请求生效。

示例代码：

// 设置全局的 Content-Type
axios.defaults.headers.common['Content-Type'] = 'application/json';

// 设置全局的 Authorization
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

2）config.headers：在单个请求中设置请求头，只对当前请求生效。

示例代码：

axios.get('/api/user', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

这两种方法都可以用于设置请求头，具体选择哪种方法取决于你的需求。如果需要在所有请求中都添加相同的请求头，可以使用 axios.defaults.headers 进行全局设置；如果只需要在特定的请求中添加请求头，可以使用 config.headers 参数进行单个请求的设置。

Axios 的 headers 使用示例

接下来，我们将通过一个实际的示例来演示 Axios 的 headers 如何使用。在这个示例中，我们将使用 Axios 发送 GET 请求，并在 headers 中设置 User-Agent 和 Authorization。

请求路径

为了便于测试，所以案例使用 Apifox 提供的开放 API 来测试，测试的 API 路径为：https://echo.apifox.com/bearer

编写代码

首先，在你的项目中安装 Axios（你可以在某个文件夹下运行命令）：

npm install axios

在你的代码中，导入 Axios 并设置 headers（你可以新建一个app.js文件运行以下代码）：

// 引入 Axios
const axios = require("axios");

// 设置基本路由
const baseURL = "https://echo.apifox.com";

// 创建 Axios 实例
const instance = axios.create({
  baseURL,
  headers: {
    "User-Agent": "MyApp/1.0", // 设置 User-Agent
    Authorization: "Bearer YOUR_ACCESS_TOKEN", // 设置 Authorization
  },
});

// 发送 GET 请求
instance
  .get("/bearer")
  .then((response) => {
    console.log("请求成功！");
    console.log(response.data);
  })
  .catch((error) => {
    console.error("请求失败！");
    console.error(error);
  });

确保将 YOUR_ACCESS_TOKEN 替换为实际的访问令牌或授权信息。使用node app.js命令运行文件，可得如下结果：

使用 Apifox 调试后端接口

当我们作为前端开发人员使用 Axios 来进行接口请求时，有时候我们可能会遇到一个问题：等待后端开发人员提供接口。这往往会导致我们在开发时遇到阻碍，进而影响项目的进度。不过，我了解到一个非常实用的工具可以解决这个问题，它就是 Apifox。

Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。

更为重要的是，Apifox 能够 Mock 数据，其集成了 Mock.js 库，允许你自定义规则，并且可以编写脚本，强大的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口，自己就能提前造各种各样的数据出来，可视化操作让你点点鼠标就能生成可观的人性化数据。

立即体验 Apifox

比如在本文案例中，要设置请求头，直接在 Headers 里面填写参数名和参数值即可：

提示与技巧

如果需要进行授权或用户身份验证，你可以在 headers 中添加 Authorization 字段，并将令牌作为值传递。确保在生产环境中使用安全的授权机制，例如 OAuth2。
注意请求头的大小写。某些服务器对大小写敏感，因此确保正确地设置请求头字段名称。
在设置 Authorization 请求头时，建议使用 Bearer 认证模式，并将访问令牌嵌入在请求头中，以提高安全性。
使用 Axios 的拦截器（interceptors），可以在请求发送前或响应返回后修改 headers 或处理错误。

总结

在本文中，介绍了 Axios 的 headers 如何使用，了解了 headers 的基本概念和常见的请求头，并通过一个实际的示例演示了如何在 Axios 请求中设置 headers。通过合理设置请求头，我们可以实现更加灵活和安全的数据交互。

知识扩展：

参考链接：

Axios 官方文档：https://axios-http.com/docs/req_config
HTTP Headers：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers
OAuth2 官方文档：https://oauth.net/2/