如何使用Axios.js设置自定义HTTP头信息？

axios.js header 详解

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js，它支持发送异步请求并自动转换 JSON 数据，在使用 Axios 进行 HTTP 请求时，Headers（请求头）是一个重要的部分，因为它们包含了关于请求的额外信息，如认证信息、内容类型等，本文将详细介绍如何在 Axios 中设置和使用 Headers。

一、Headers 的基本概念

HTTP 请求头是一组键值对，用于传递关于请求的附加信息，常见的请求头包括：

Content-Type: 指定请求体的媒体类型，例如application/json 或application/x-www-form-urlencoded。

Authorization: 用于身份验证，通常包含访问令牌或用户名密码。

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

Accept: 指定客户端能够接收的响应内容类型。

二、安装 Axios

在使用 Axios 之前，需要先安装它，可以通过以下几种方式进行安装：

1、使用 npm:

   npm install axios

2、使用 Yarn:

   yarn add axios

3、通过 CDN:

在 HTML 文件中通过 CDN 引入：

   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

三、设置 Headers 的方法

Axios 提供了多种方法来设置请求头，具体选择哪种方法取决于需求，以下是几种常见的方法：

1、通过 config 对象参数设置 Headers:

可以在请求方法中传递一个 config 对象，该对象包含 Headers 属性，这种方法适用于单个请求。

   const axios = require('axios');
   const url = 'https://api.example.com/data';
   const config = {
     headers: {
       'Content-Type': 'application/json',
       'Authorization': 'Bearer ' + localStorage.getItem('token')
     }
   };
   axios.get(url, config)
     .then(response => console.log(response))
     .catch(error => console.error(error));

2、为所有请求设置默认 Headers:

可以通过axios.defaults.headers 设置全局默认的请求头，适用于所有请求。

   axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

3、创建特定的 Axios 实例:

如果需要多个不同的配置，可以创建多个 Axios 实例，每个实例有不同的配置。

   const instance1 = axios.create({
     baseURL: 'https://api.service1.com',
     headers: { 'X-Custom-Header': 'FooBar' }
   });
   const instance2 = axios.create({
     baseURL: 'https://api.service2.com',
     headers: { 'X-Custom-Header': 'AnotherValue' }
   });
   instance1.get('/path');
   instance2.get('/anotherpath');

4、使用拦截器:

拦截器可以在请求或响应被处理前进行拦截，从而修改请求头或响应，拦截器本质上等同于 Express 或 Mongoose 的中间件。

   axios.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   });

四、常见 Headers 设置示例

1、设置 Content-Type:

   axios.post('/user', {
     firstName: 'Fred',
     lastName: 'Flintstone'
   }, {
     headers: { 'Content-Type': 'application/json' }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

2、设置 Authorization:

   axios.get('/user/12345', {
     headers: { 'Authorization': 'Bearer ' + token }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

3、设置 User-Agent:

   axios.get('/user/12345', {
     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' }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

4、设置 Accept:

   axios.get('/user/12345', {
     headers: { 'Accept': 'application/json' }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

五、拦截器中的 Headers 管理

在实际项目中，拦截器常用于管理 Headers，例如添加认证信息或刷新过期的访问令牌，以下是一个简单的示例：

// Request interceptor for API calls
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

六、常见问题与解答

1、如何为所有请求设置默认的 Headers？

可以通过axios.defaults.headers 设置全局默认的请求头。

   axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');

2、如何在特定请求中覆盖默认的 Headers？

可以在请求方法中传递一个 config 对象，该对象包含 Headers 属性。

   axios.get('/user/12345', {
     headers: { 'Content-Type': 'application/json' }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

到此，以上就是小编对于“axios.js header”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。