終於明白了vue使用axios發送post請求時的坑及解決原理

前言：在作項目的時候正好同事碰到了這個問題，問爲何用axios在發送請求的時候沒有成功，請求不到數據，反而是報錯了，下圖就是報錯請求本尊

vue裏代碼以下：

this.$http.post('/getMatterList.do',{"matterIds":"1,2,3"})
     .then((res)=>{
        console.log(res);
   })

乍一看，沒毛病啊，請求不就是這麼發的嗎，axios官方文檔都這麼示範的呢，還能有錯？咱們再來仔細看下瀏覽器裏發出去的請求

有沒有發現什麼蹊蹺，傳送參數的形式不是咱們熟悉的form-data，而是Request Payload。莫慌，其實咱們只要作兩步設置就能夠解決了

• 用Qs.stringify()將對象序列化成URL的形式，Qs是axios裏面自帶的，因此直接引入就能夠了
• 設置請求頭裏的'Content-Type'爲'application/x-www-form-urlencoded'

import Qs from 'qs'
   var data = Qs.stringify({"matterIds":"1,2,3"});
   this.$http.post('/getMatterList.do',data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res)=>{
        console.log(res)
   })

改完以後再來看下，妥妥的了

問題是解決了，可是爲何呢？查閱一番資料以後，我又回來啦

HTTP請求中的get請求和post請求參數的存放位置是不同的，get請求的參數以鍵值對的方式跟在url後面的，而post請求的參數是以鍵值對的方式在請求體裏的

• get請求

• post請求

爲什麼要設置請求頭裏的'Content-Type'：

咱們使用不一樣請求方式時，參數的傳輸方式是不同的，可是服務端在取咱們接口的請求參數時，用的方法其實倒是同樣的，都是使用request.getParameter(key)來獲取，實際上是由於tomcat在中間會對請求參數進行解析處理，處理完把解析出來的表單參數放在request parameter map中，因此後端就能夠經過request.getParameter(key)來統一獲取數據，而tomcat解析的時候是怎麼知道當前的請求是post請求的呢，就是經過'contentType'，當'contentType'爲"application/x-www-form-urlencoded",它纔會去讀取請求體數據。

爲什麼要用Qs.stringify()將對象序列化成URL的形式：

在最開始的時候咱們說了，post請求參數是以鍵值對的形式存在請求體裏，用Qs.stringify()就是把傳入的對象轉換爲鍵值對。

最後在vue裏用axios的時候，針對post請求的問題能夠作一個全局的設置，避免每一個請求都要設置一遍太麻煩