后端获取不到axios.post提交的参数

后端获取不到axios.post提交的参数

官网示例是这样的：

# 方式一：直接传入json对象作为参数
axios.post('/user', {
	firstName: 'Fred',
	lastName: 'Flintstone'
 })
 .then(function (response) {
	 console.log(response);
 })
 .catch(function (error) {
	 console.log(error);
 });
  
  
 # 方式二： 通过属性data指定参数
 axios({
 	method: 'post',
 	url: '/user/12345',
 	data: {
	   	firstName: 'Fred',
	   	lastName: 'Flintstone'
 	}
});

项目中的代码最开始参考官网示例编写诶，实现如下：
前端实现：

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>



<script>
axios.post('/user', {
    "age": 18,
    "email": "[email protected]",
    "name": "张三"
})
 .then(function (response) {
	 console.log(response);
 })
 .catch(function (error) {
	 console.log(error);
 });
</script>

后端实现：

request.getParameterMap();
request.getParameter("email");

部署运行项目后，发现后端这两个方法获取参数都是为null，后端又不想变更，于是前端想着怎么来解决这个问题。

解决方案：

首先要明白，axios的默认行为：
axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。
所以它是将 Content-Type 改成了 application/json;charset=utf-8，后端获取参数可能拿不到。

这时候，需要使用到 Qs模块了, 借助Qs模块来序列化前端的json对象，使之成为name=张三&age=18&[email protected]的形式提交：。

具体用法：

Qs.stringify(json对象)

引入Qs.js模块：

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<!-- 引入Qs模块  -->
<script src="js/qs.js"></script>



<script>
var obj = {"name":"张三", "age":18,"email":"[email protected]"};
var paramStr = Qs.stringify(obj);
console.log(paramStr);  //  name=张三&age=18&[email protected]

axios({
    method: 'post',
    url: '/user',
    data: Qs.stringify(obj)
})
</script>

重新运行项目，后端通过request.getParameterMap()或者request.getParameter(“参数名”) 都可以获得请求参数了。

当然，熬得过后端德华，让他们改也是可以的。后端可以直接拿到json传转换成对象也是ok的。