axios接口调用传请求头

简介

在前后端分离的开发模式中，接口调用是必不可少的一部分。而在实际开发中，我们经常会遇到需要在请求头中传递一些信息的情况，比如用户登录态的验证、权限验证、跨域请求等等。axios是一款基于Promise的HTTP客户端，可以用于浏览器和Node.js。它具有简洁的API、优雅的请求方式以及对请求和响应的拦截器等功能，使得我们可以轻松地进行接口调用并传递请求头。

如何在axios中传递请求头

在axios中，我们可以通过设置headers属性来传递请求头。headers是一个对象，其中的键值对表示请求头的字段和值。我们可以在发起请求之前通过设置headers来添加自定义的请求头。

下面是一个使用axios进行GET请求的示例代码：

// 引入axios库
import axios from 'axios';

// 设置请求头
const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer xxxxxxxx'  // 设置Bearer令牌
};

// 发起GET请求
axios.get(' { headers })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们首先引入了axios库。然后，我们定义了一个headers对象，其中包含了两个请求头字段，分别是Content-Type和Authorization。接着，我们使用axios.get方法发起了一个GET请求，并将headers对象作为第二个参数传递给该方法。最后，我们通过.then方法获取到了请求的响应数据。

请求头常见字段

在实际开发中，常见的请求头字段有很多，下面列举了几个常见的字段及其用途：

请求头字段 用途
Content-Type 指定请求体的MIME类型，常用的有application/json、application/x-www-form-urlencoded等
Authorization 用于身份验证，通常与Bearer令牌一起使用
User-Agent 标识请求的客户端信息，常用于统计分析、浏览器兼容等
Accept 告诉服务器客户端可以处理的MIME类型
Referer 表示请求的源地址，用于防盗链、统计分析等
Cookie 传递HTTP Cookie
X-Requested-With 标识Ajax请求
Origin 表示请求的源地址，用于跨域请求

拦截器对请求头的处理

除了直接在请求中设置请求头，我们还可以通过拦截器的方式来处理请求头。axios提供了request拦截器，它可以在每个请求发送之前对请求进行统一处理。

下面是一个使用拦截器处理请求头的示例代码：

// 引入axios库
import axios from 'axios';

// 创建axios实例
const instance = axios.create();

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在请求发送之前做一些处理
  config.headers['Authorization'] = 'Bearer xxxxxxxx';
  return config;
}, error => {
  return Promise.reject(error);
});

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

在上面的代码中，我们首先使用axios.create方法创建了一个axios实例。然后，我们通过instance.interceptors.request.use方法添加了一个请求拦截器。在该拦截器中，我们对config.headers进行了修改，添加了一个Authorization字段。最后，我们使用该axios实例发起了一个GET请求。

总结

通过本文，我们了解了如何在axios中传递请求头。我们可以通过headers属性直接在请求中设置请求头，也可以通过拦截器的方式对请求头进行统一处理。请求头中的字段可以根据具体需求进行设置，