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 格式的字符串

axios中post中参数问题 --- form Data和Request payload_第1张图片

Form Data 大概格式如下,请求头部的 Content-Type: application/x-www-form-urlencoded,并且请求正文是类似 get 请求 url 的请求参数

axios中post中参数问题 --- form Data和Request payload_第2张图片

后台处理

对于 Request Payload 请求, 必须加 @RequestBody 才能将请求正文解析到对应的 bean 中,且只能通过 request.getReader() 来获取请求正文内容

axios中post中参数问题 --- form Data和Request payload_第3张图片

对于 Form Data 请求,无需任何注解,springmvc 会自动使用 MessageConverter 将请求参数解析到对应的 bean,且通过 request.getParameter(...) 能获取请求参数

axios中post中参数问题 --- form Data和Request payload_第4张图片

你可能感兴趣的:(vue)