在前端開發中,我們經常需要使用AJAX來進行后臺數據的獲取或者提交。其中,使用jQuery封裝的ajax方法更是常用的一種方式。然而,有些情況下我們需要設置請求頭信息,就會出現設置請求頭信息卻不生效的情況。下面介紹一種可能會導致請求頭信息設置失效的情況及解決方法。
$.ajax({
url: 'xxx',
type: 'POST',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
headers: {
'Authorization': 'Bearer TOKEN',
'Header': 'VALUE'
},
success: function(data) {
// 成功回調函數
},
error: function(xhr) {
// 失敗回調函數
}
});
在上述代碼中,我們設置了contentType和headers兩個參數。其中headers設置了Authorization和Header兩個請求頭信息。但實際發送請求后發現請求頭信息并沒有生效,怎么解決呢?
原因是:如果contentType設置為application/json,則headers中設置的請求頭信息將會被覆蓋。所以在這種情況下,應該使用beforeSend函數來設置請求頭信息。
$.ajax({
url: 'xxx',
type: 'POST',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
beforeSend: function(request) {
request.setRequestHeader('Authorization', 'Bearer TOKEN');
request.setRequestHeader('Header', 'VALUE');
},
success: function(data) {
// 成功回調函數
},
error: function(xhr) {
// 失敗回調函數
}
});
下面是修改后的代碼,我們將headers中設置的請求頭信息,移到了beforeSend函數中,然后使用request.setRequestHeader方法來設置請求頭信息。這樣發送請求后,請求頭信息就會生效了。