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

問題出現

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

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

問題原因

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

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

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

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

解決方法

第一種方法 URLSearchParams物件

let params = new URLSearchParams();
//你要傳給後臺的key-value對
params.append('key','value');

axios.post(url,params);
複製程式碼

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

第二種方法 使用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' })
    }
})
複製程式碼