使用axios设置headers

一、axios设置header跨域

在前后端分离的开发中，前端常常需要通过ajax请求获取后端数据，而由于前后端分离的应用一般会使用不同的域名或端口，所以需要解决跨域问题。使用axios发送请求时，需要在headers中设置一些参数来解决跨域问题。

在axios的config对象中设置参数就可以解决跨域问题，以下是一个设置跨域header的示例：

axios.defaults.baseURL = 'http://localhost:3000'; //设置默认url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //设置post请求的header
axios.defaults.withCredentials = true; //设置跨域携带cookies
axios({
    url: '/api/user',
    method: 'post',
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

二、axios设置header解决跨域

在使用axios设置header时，有可能会遇到一些跨域问题。在此情况下，可以在请求头中设置Origin和Referer来解决跨域问题。

axios({
    url: '/api/user',
    method: 'post',
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Origin':'http://www.example.com',
        'Referer': 'http://www.example.com/user'
    },
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

三、axios设置header无效

有时候在设置axios的header时会遇到一些无效的问题，这时候需要注意以下几点：

• 检查请求路径是否正确
• 检查请求方法是否正确
• 检查请求头是否正确
• 检查发送的数据是否符合要求
• 检查服务器是否正确处理请求

下面是一个设置无效header的示例：

axios({
    url: '/api/user',
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

四、axios设置header不生效

有时候在设置axios的header时会遇到一些不生效的问题，这时候需要检查以下几点：

• 是否在全局配置中设置了相同的header，导致覆盖了当前请求的header
• 是否允许当前域请求对应的资源
• 是否遵循同源策略限制
• 是否发送的请求数据的编码格式不正确

以下是一个设置不生效header的示例：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
axios({
    url: '/api/user',
    method: 'get',
    headers: {
        'Authorization': token
    },
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

五、axios设置请求超时时间

在axios中，可以设置请求超时时间，当请求超时时，会自动取消请求，避免无效请求的占用资源。

axios({
    url: '/api/user',
    method: 'get',
    timeout: 5000, //设置超时时间为5秒
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

六、axios设置请求头header

在axios中，可以自定义请求头header，以便于在接口中获取相关信息。

axios({
    url: '/api/user',
    method: 'post',
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json'
    },
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

七、axios设置cookie

在axios请求时，可以设置携带cookie，让服务器可以获取到前端的cookie值以判定身份信息。

axios({
    url: '/api/user',
    method: 'post',
    withCredentials:true, //设置是否携带cookie，默认false
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + token
    },
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

八、完整示例代码

axios.defaults.baseURL = 'http://localhost:3000'; //设置默认url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //设置post请求的header
axios.defaults.withCredentials = true; //设置跨域携带cookies

axios({
    url: '/api/user',
    method: 'post',
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    data: {
        name: 'tony',
        job: 'engineer'
    }
}).then(function(response){
    console.log(response.data);
}).catch(function(error){
    console.log(error);
});

以上就是使用axios设置headers的详细介绍，希望对大家有所帮助！