丟擲問題：

在vue專案中使用axios發post請求時候，後臺返回500。

發現是form Data 和 Request payload的問題。

後臺對兩者的處理方式不同，導致我們接收不到資料。

解決問題：

首先需要全域性配置

axios.defaults.headers.post['Content-Type'] = 'Content-Type:application/x-www-form-urlencoded; charset=UTF-8'

下面寫法會以Request payload方式傳送引數

axios.post(url, {
    key1: val1
})

而後臺是以form Data方式處理的，如何傳參後臺接收到的才是form Data方式？

方案一：

var params = new URLSearchParams();

//你要傳給後臺的引數值 key/value
params.append('key1', 'value1');       
params.append('key2', 'value2');
params.append('key3', 'value3');

axios.post(url, params)

缺點：相容性非常不好，ie瀏覽器完全不相容

方案二：使用qs

import qs from 'qs';

var params = qs.stringify({
                key1: value1,
                key2: value2,
                key3: value3,
             })

axios.post(url, params)
 

或者

axios.request({
    method: 'post',
    url: url,
    params: { key1: val1},
    paramsSerializer: function(params) {
      // arrayFormat可以格式化你的陣列引數
      return qs.stringify(params, { arrayFormat: 'brackets' })
    }
  })

Request Payload和Form Data區別

Request Payload 大概格式如下，請求頭部的 Content-Type: application/json，並且請求正文是一個 json 格式的字串

Form Data 大概格式如下，請求頭部的 Content-Type: application/x-www-form-urlencoded，並且請求正文是類似 get 請求 url 的請求引數

後臺處理

對於 Request Payload 請求， 必須加 @RequestBody 才能將請求正文解析到對應的 bean 中，且只能通過 request.getReader() 來獲取請求正文內容

對於 Form Data 請求，無需任何註解，springmvc 會自動使用 MessageConverter 將請求引數解析到對應的 bean，且通過 request.getParameter(...) 能獲取請求引數