安装axios 使用添加请求头
时间: 2025-06-29 09:16:36 浏览: 8
### 如何在 Axios 中添加请求头
#### 安装 Axios
为了能够在项目中使用 Axios,首先需要通过 npm 或 yarn 进行安装:
```bash
npm install axios
```
或者
```bash
yarn add axios
```
#### 创建 Axios 实例并设置默认请求头
创建一个新的 Axios 实例,并为其指定默认的请求头。这可以通过 `axios.create` 方法来实现。
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础URL
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer your_token_here' // 添加认证令牌到请求头中[^5]
}
});
```
对于动态获取 token 的情况,则可以在每次发送请求前更新该实例中的 header 字段。
#### 使用拦截器自动附加 Token 到请求头上
利用 Axios 提供的拦截功能,在每个 HTTP 请求发出之前检查是否存在有效的访问令牌 (access token),如果存在则将其加入到请求头部。
```javascript
// 添加请求拦截器
instance.interceptors.request.use(
config => {
const accessToken = localStorage.getItem('accessToken'); // 获取存储于本地的 access token
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`; // 更新请求头中的授权字段
}
return config;
},
error => Promise.reject(error)
);
```
以上代码片段展示了如何定义一个自定义的 Axios 实例以及怎样通过拦截器机制确保所有传出的数据包都携带必要的身份验证信息。
#### 单独接口的个性化配置
当某些特定 API 接口有额外需求时,比如上传文件需要用到 multipart/form-data 类型的内容格式化,可以直接针对单次调用修改 Content-Type 属性而不影响其他地方使用的默认值[^2]。
```javascript
instance.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => console.log(response))
.catch(error => console.error(error));
```
这种灵活性允许开发者根据不同场景灵活调整网络通信行为而无需改变全局设定。
阅读全文
相关推荐


















