Vue axios POST传 字符串/键值对 后台@RequestParam接收为空 及使用application/x-www-form-urlencoded问题详解

原因分析

axios post使用application/x-www-form-urlencoded问题：

默认application/x-www-form-urlencoded对表单数据进行编码，数据以键值对通过&符号拼接在http请求体中发送给服务器

如果属性为multipart/form-data，则以消息的形式发送给服务器

但是我们在vue里面直接提交的是一个对象，根本不是这个玩意，服务端中需以@RequestBody才能进行接收

所以我们要借助node里面的qs库

qs和JSON差不多（但是qs.stringify和JSON.stringify结果不同，可console打印查看）

var params = {}
params['subject'] = 'unoin-pay-subject'
params['body'] = 'unoin-pay-body'
console.log(JSON.stringify(params))
console.log(this.qs.stringify(params))

{"subject":"unoin-pay-subject","body":"unoin-pay-body"}
subject=unoin-pay-subject&body=unoin-pay-body

正确姿势

相关代码

let data = {
  "userId": userId,
};

let config = {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
};

_this.$axios.post(url, _this.qs.stringify(data), config).then(function (res) {...

实现步骤

1.正常定义请求体参数对象

2.通过axios的config配置`Content-Type`为`application/x-www-form-urlencoded`

更多config配置说明详见官方文档：http://www.axios-js.com/docs/

3.qs.stringify序列化数据

qs引入步骤

1.安装：

npm i qs --save
``` 

2.`main.js`引入：

```javascript
import qs from 'qs'

3.全局声明：

// 全局引入qs传输数据序列化
Vue.prototype.qs=qs;

4.调用：

this.qs.stringify(data)