如何使用 axios 发送authorization header？

在使用axios发送HTTP请求时，有时需要在请求中包含authorization header，以确保对服务器的请求是经过授权的。authorization header通常用于传递令牌（例如JWT）或基本的身份验证凭据。

以下是如何在axios中添加authorization header的步骤：

1. 安装和引入axios

首先，确保你的项目中已安装axios。如果未安装，可以通过npm或yarn安装：

bash
npm install axios

然后，在你的文件中引入axios：

javascript
import axios from 'axios';

2. 设置请求的Authorization Header

你可以在发送请求时直接在配置中添加headers，或者通过axios的全局配置来设置。

示例1: 在单个请求中添加Authorization Header

javascript
axios.get('https://api.example.com/data', {
    headers: {
        'Authorization': `Bearer YOUR_ACCESS_TOKEN`
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error('Error:', error);
});

在这个例子中，我们向https://api.example.com/data发送一个GET请求，并在headers中包含了一个名为Authorization的字段，其内容是Bearer，后跟一个空格和访问令牌。

示例2: 全局配置Authorization Header

如果你的多个请求都需要相同的authorization header，可以将其设置为全局配置：

javascript
axios.defaults.headers.common['Authorization'] = `Bearer YOUR_ACCESS_TOKEN`;

这样设置后，所有使用axios发送的请求都会自动包含这个Authorization header。

3. 使用axios实例

为了更好的管理和复用配置，可以创建一个axios实例，并对这个实例进行配置：

javascript
const apiClient = axios.create({
    baseURL: 'https://api.example.com',
    headers: {
        'Authorization': `Bearer YOUR_ACCESS_TOKEN`
    }
});

apiClient.get('/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

这种方式可以帮助我们更好地控制不同的请求配置，并且使得代码更加模块化。

总结

通过配置authorization header，axios可以安全地发送请求到需要验证的服务器端。这不仅限于Bearer令牌，也适用于其他类型的认证方案。通过上述方法，可以灵活地为不同的请求或全局请求配置所需的headers。