Vue axios发post请求后台接收不到参数的三种解决方案及在header中传值

最近用vue做项目使用axios发送post请求时遇到了前端传数据后端接收不到的情况，在前端发送请求时报500.

代码如下：

首先，先引入axios
import axios from 'axios'


其次，请求链接
let param = {
    username: '111',
    userpass: '1'
}

axios.post('/api/?requestflag=loginsys', param, {
    headers: {
        // 当前版本
        bbh: this.version,
        // 区分系统
        androidorios: 'ios'
    }
}).then(res => {
    console.log('请求成功')
}).catch(error => {
    console.log('请求失败')
})

axios传值是这样的：

ajax传值是这样的：

一个Request Payload，一个Form Data。
将Request Payload 转为Form Data格式就可以了，有三种方式：

一、使用qs（推荐）

首先在你的项目里安装qs模块：

npm install qs --save-dev

然后在需要使用的页面引入一下：

import qs from 'qs'

引入好了之后，把上面的postData用qs转一下再发送给后台就可以了：

let postData = qs.stringify({
    username: '111',
    userpass: '1'
})

这样发送给后台时就是Format Data格式了。

二、使用URLSearchParams

let postData = new URLSearchParams()
postData.append('username', '111')
postData.append('userpass', '1')

这样也可以，个人觉得写起来麻烦。

三、直接使用字符串

let postData = 'username=' + '111' + '&userpass=' + '1'

es6写法：

let postData = `
    username = ${'111'}&userpass=${'1'}
`

三种方法的原理是一样的，都是转化为字符串，但第三种方法当所传的值为null时会被转化为空字符串，个人推荐的是第一种方法。