Vue 使用 Axios 傳送請求的請求體問題

Reaper622發表於2018-11-10
VueiOS

問題出現

最近在接手一個專案的時候使用了Vue框架搭配Axios作為請求庫，再給伺服器傳送post的請求的時候發現了後臺總是返回500，像下圖

iq9WUe.png

後來經過除錯發現是因為 請求體內 Form Data 和 Request Payload 的問題。後臺對這兩者的處理是不一樣的，就會導致我們拿不到資料。

問題原因

其實原因很簡單，是因為當我們用下面的方式

axios.post(url,{ 
   key:value
  }).then()複製程式碼

給伺服器傳送請求時，axios預設會用Requset Payload傳送引數，但後臺是以Form Data方式處理的，所以會拿不到引數。

此時前後端的場景可能是這樣的

Vue 使用 Axios 傳送請求的請求體問題

解決方法

第一種方法 URLSearchParams物件

let params = new URLSearchParams();
//你要傳給後臺的key-value對params.append('key','value');
axios.post(url,params);
複製程式碼

這樣傳過去就是Form Data格式了，但這樣有一個重大的問題那就是：相容性很差，尤其是iE瀏覽器，完全不相容。

Vue 使用 Axios 傳送請求的請求體問題

第二種方法 使用qs

import qs from 'qs';
let params = qs.stringify({ 
   key:value,    key2:value2
  })axios.post(url,params);
//或者axios.request({ 
   method:'post',    url:url,    params: { 
     key: value,      key1: value    
  },    // `paramsSerializer` 是一個負責 `params` 序列化的函式    paramsSerializer: function(params){ 
        // arrayFormat可以格式化你的陣列引數      return qs.stringify(params, { 
arrayFormat: 'brackets' 
  })    
  }
  })複製程式碼

來源：https://juejin.im/post/5be69e1b6fb9a049e23184ae

相關文章