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