axios改变请求头

《axios改变请求头》

在使用 axios 发起 HTTP 请求时，如果想要改变请求头，可以通过配置 axios 实例或直接在请求方法中设置 headers 属性来实现。接下来将几种改变 axios 请求头的方法。

一、创建 axios 实例时设置默认请求头

这是较为常用的一种方式，可以在创建 axios 实例时就指定默认的请求头，这样之后使用该实例发起的所有请求都会带有这些请求头。

javascript
// 创建axios实例并设置默认请求头
const instance = axios.create({
    baseURL: 'https://example.com/api', // 可选：设置基础url
    headers: {
        'Authorization': 'Bearer your<em>token</em>here',
        'Content - Type': 'application/json'
    }
});</p>

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

二、单独为每次请求设置请求头

当不同请求需要不同的请求头时，可以在每次请求的时候单独设置。

javascript
axios.get('https://example.com/api/data', {
    headers: {
        'Custom - Header': 'custom<em>value',
        'Another - Header': 'another</em>value'
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error('Error occurred:', error);
});</p>

<p>// 对于post请求也是一样
axios.post('https://example.com/api/submit', {
    data: 'some data'
}, {
    headers: {
        'X - Custom - Post - Header': 'post<em>header</em>value'
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error('Post request error:', error);
});

三、动态改变全局默认请求头

有时候项目运行过程中可能需要根据某些条件动态地改变全局的默认请求头。

javascript
// 获取当前默认请求头
let defaultHeaders = axios.defaults.headers.common;</p>

<p>// 动态添加或修改请求头
if (someCondition) {
    axios.defaults.headers.common['Dynamic - Header'] = 'dynamic_value';
} else {
    delete axios.defaults.headers.common['Dynamic - Header'];
}</p>

<p>// 此后发起的请求都会受到新的默认请求头影响
axios.get('https://example.com/api/test')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Test request error:', error);
    });

通过以上这几种方式，我们就可以灵活地改变 axios 的请求头，以满足不同的开发需求，在实际项目中可以根据具体场景选择合适的方法。