《axios添加header》

在使用axios进行网络请求时，有时需要为请求添加header信息。解决方案是利用axios的配置项，在创建实例或者发起请求时设置headers属性。

一、创建axios实例时添加header

我们可以创建一个自定义配置的axios实例，在这个过程中添加所需的header。

javascript
// 创建axios实例
const instance = axios.create({
    baseURL: 'https://example.com/api', // 根据实际情况设置基础url
    headers: {
        'Authorization': 'Bearer your<em>token</em>here', // 如果是认证相关的header
        'Content - Type': 'application/json' // 指定请求体格式等
    }
});</p>

<p>// 使用该实例发起请求
instance.get('/users')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('There was an error!', error);
    });

二、单独为每次请求添加header

如果不想创建新的axios实例，只想针对某次特定的请求添加header。

javascript
axios.get('https://example.com/api/users', {
headers: {
'Custom - Header': 'custom_value',
'Another - Header': 'another_value'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error occurred:', error);
});


三、动态修改header

有时候header中的值可能是在运行时确定的，例如从用户输入获取token等。

javascript
let token = ''; // 假设这是从登录操作或者其他地方获取到的token</p>

<p>// 动态设置header
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;</p>

<p>// 发起请求
axios.get('https://example.com/api/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Request failed:', error);
    });</p>

<p>// 或者对于post请求
axios.post('https://example.com/api/submit', {
    data: 'some<em>data'
}, {
    headers: {
        'Authorization': 'Bearer ' + token,
        'My - Dynamic - Header': 'value</em>based<em>on</em>runtime'
    }
})
.then(response => {
    console.log('Post request successful:', response.data);
})
.catch(error => {
    console.error('Post request failed:', error);
});

通过以上这几种方式，我们就可以根据实际需求灵活地为axios请求添加header，从而满足不同的业务场景下的要求。