Axios 中设置请求头

1. 针对单个请求设置请求头

在发起请求时，通过 headers 配置项设置：

import axios from 'axios';// GET 请求
axios.get('/api/data', {headers: {'Content-Type': 'application/json','Authorization': 'Bearer token123','Custom-Header': 'custom-value'}
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});// POST 请求
axios.post('/api/submit', { data: 'test' },{headers: {'Content-Type': 'application/x-www-form-urlencoded','Authorization': 'Bearer token123'}}
)
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

2. 全局设置默认请求头

如果多个请求需要使用相同的请求头，可以设置全局默认值：

import axios from 'axios';// 设置全局默认请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.get['Accept'] = 'application/json';// 之后的请求会自动带上这些头信息
axios.get('/api/data').then(response => {console.log(response.data);});

3. 使用拦截器设置请求头

拦截器可以在请求发送前动态设置请求头，适合需要根据条件动态修改的场景：

import axios from 'axios';// 创建 axios 实例
const instance = axios.create({baseURL: '/api'
});// 请求拦截器
instance.interceptors.request.use(config => {// 在发送请求前设置请求头const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}config.headers['Content-Type'] = 'application/json';return config;},error => {return Promise.reject(error);}
);// 使用实例发送请求
instance.get('/data').then(response => {console.log(response.data);});

常见的请求头设置包括：

• Content-Type：指定请求体的格式，如 application/json、application/x-www-form-urlencoded 等
• Authorization：用于身份验证，通常是 Bearer token 形式
• Accept：指定期望的响应数据格式