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

抛出问题：

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