使用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的詳細介紹，希望對大家有所幫助！