今天有人問同一套后台系統為什么jquery可以正常使用,axios卻報錯呢,下面總結如下:
總的來說是jquery和axios傳參類型不同,那為什么jquery和axios請求時傳參類型不同?
1)jquery默認 form Data(如:url?a=1形式);
因為jquery在執行post請求時,會默認設置Content-Type為application/x-www-form-urlencoded,發送的參數為form Data形式,所以服務器能夠正確解析;
2)而使用原生ajax、axios請求時,如果不顯示的設置Content-Type,axios默認發送數據時,數據格式是application/json,控制台參數里顯示Request Payload(即 json格式),而並非我們常用的Form Data格式。
既然我們知道axios post方法默認使用application/json格式編碼數據,那么解決方案就有兩種:
一是后台改變接收參數的方法;
另一種則是將axios post方法的編碼格式修改為application/x-www-form-urlencoded,這樣就不需要后台做什么修改了。
---------------------
改變接收參數的解決辦法:
1)URLSearchParams
var params = new URLSearchParams(); params.append('key1', 'value1'); //你要傳給后台的參數值 key/value params.append('key2', 'value2'); params.append('key3', 'value3');
querystring
module as follows:
const axiosInstance = axios.create({
// axios實例配置
timeout: 15000,
method:
'post'
,
headers: {
'Content-Type'
:
'application/x-www-form-urlencoded'
},
transformRequest: [
function
(data) {
// 請求前參數序列化
return
qs.stringify(data);
}]
});
params用於get請求,是添加到url的請求字符串中的,即
是發送請求的查詢參數對象,對象中的數據會被拼接成
url?param1=value1¶m2=value2
。。
而data是添加到請求體(body)中的, 用於post請求。
參考:
https://github.com/axios/axios/blob/master/README.md#using-applicationx-www-form-urlencoded-format