axios中post中参数问题 --- form Data和Request payload

抛出问题：
在vue项目中使用axios发post请求时候，后台返回500。

发现是form Data 和 Request payload的问题。

后台对两者的处理方式不同，导致我们接收不到数据。

ps: 

正常的post请求 加 
import qs from 'qs'
config.data = qs.stringify(config.data, {
        arrayFormat: 'indices',
        allowDots: true
      }) // 序列化请求参数
请求的结果是

不加 则是

 

解决问题：
首先需要全局配置

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(...) 能获取请求参数