vue axios傳參報錯的解決方法


今天有人問同一套后台系統為什么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');
  bug: ie瀏覽器完全不兼容。
 
  2)qs  qs.stringfy(para)即可;
   但是JSON.stringify和qs.stringify雖然都是序列化,效果卻不同,如下:
   1)JSON.stringify:    "{"a":"1","b":2}"
   2)qs.stringify:     a=1&b=2
    另,網上教程很多重新安裝了 npm install qs --save, 需要注意的是axios里已經包含qs,不用重新安裝;
 
  3)In node.js, you can use the  querystring module as follows:
  4)
 
 
改變header頭的解決辦法: headers和transformRequest配合使用;
const axiosInstance = axios.create({
   // axios實例配置
   timeout: 15000,
   method:  'post' ,
   headers: {
     'Content-Type' 'application/x-www-form-urlencoded'
   },
   transformRequest: [ function (data) {
     // 請求前參數序列化
     return  qs.stringify(data);
   }]
});
 
 
另附:axios參數里的params和data區別:
在使用axios時,要注意到配置選項中包含params和data兩者,以為他們是相同的,實則不然。 
params用於get請求,是添加到url的請求字符串中的,即是發送請求的查詢參數對象,對象中的數據會被拼接成 url?param1=value1&param2=value2。。
而data是添加到請求體(body)中的, 用於post請求。
 
 

參考:

https://github.com/axios/axios/blob/master/README.md#using-applicationx-www-form-urlencoded-format

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM