axios 添加请求头

1. 什么是axios？

Axios 是一个基于 Promise 的 HTTP 请求客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。它可以帮助我们更方便地与后端进行数据交互，并提供了一系列的便捷方法来处理请求和响应。

2. 为什么需要添加请求头？

在发送 HTTP 请求时，我们经常需要在请求中添加一些头部信息，以便服务器能够正确处理请求。常见的请求头包括：Content-Type、Authorization、User-Agent等。添加请求头可以提供更多的信息给服务器，以便服务器根据这些信息做出相应的处理。

3. 如何添加请求头？

在使用 axios 发送请求时，可以通过在配置对象中设置 headers 属性来添加请求头。headers 是一个对象，其中每个属性对应一个请求头字段，属性值为对应的字段值。

下面是一个简单的示例，展示了如何使用 axios 发送带有请求头的 GET 请求：

import axios from 'axios';

axios.get(' {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xxxxxxxx',
    'User-Agent': 'MyApp/1.0'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们使用了 axios.get 方法发送了一个 GET 请求，并通过 headers 属性添加了三个请求头字段：Content-Type、Authorization、User-Agent。

4. 进阶技巧：全局默认请求头

除了在每个请求中单独设置请求头，axios 还提供了一种全局设置默认请求头的方式，以便在每个请求中自动添加相同的请求头。

可以通过修改 axios.defaults.headers 对象来设置默认请求头。下面的示例展示了如何设置全局默认请求头：

import axios from 'axios';

// 设置默认请求头
axios.defaults.headers.common['Authorization'] = 'Bearer xxxxxxxx';
axios.defaults.headers.post['Content-Type'] = 'application/json';

axios.get('
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们通过修改 axios.defaults.headers.common 对象设置了一个默认的 Authorization 请求头字段，以及通过修改 axios.defaults.headers.post 对象设置了一个默认的 Content-Type 请求头字段。

5. 完整的请求头配置

除了设置请求头字段，axios 还提供了其他一些配置选项，可以帮助我们更灵活地处理请求头。下表列出了一些常用的配置选项：

选项 描述
headers 设置请求头字段，可以是一个包含请求头字段的对象，也可以是一个函数
baseURL 设置请求的基础 URL
timeout 设置请求的超时时间，单位为毫秒
withCredentials 设置是否携带跨域请求的凭证，默认为 false，对于跨域请求需要设置为 true
onUploadProgress 上传进度回调函数，用于监听上传进度
onDownloadProgress 下载进度回调函数，用于监听下载进度
... 更多配置选项请参考 axios 官方文档

6. 结语

通过添加请求头，我们可以向服务器提供更多的信息，以便服务器能够正确处理我们的请求。本文介绍了如何使用 axios 添加请求头，并给出了一些进阶技巧。希望本文对你理解并使用 axios 添加请求头有所帮助。

参考资料

  • [axios 官方文档](