vue axios 请求后端无法传参问题
vue请求后端无法传参问题
- 问题描述
- 处理过程
- 总结
问题描述
在学习vue时，使用axios调用后端，发现无法把参数正确传到后端，现象如下：
-
使用vue发起请求，浏览器上已经有传参，但是后端没接收到对应的用户名密码：
-
使用postman发起请求，后端可以接收
处理过程
使用postman发送，一切正常，说明vue的axios配置有问题，或者是我的参数穿的格式不对，参数我是这么传的，一个对象，按道理来说没啥问题，我认为后端会把这个json对象解析付给入参，但是结果却没有：
网上搜了一下，需要添加form表单头部到axios的header配置中：
{ "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" }
再次发起请求：
载荷里面的内容发生了变化，请求载荷变成了表单数据
后端成功解析到请求参数：
总结
一开始以为请求载荷就是post请求里的表单数据，后面才发现这两个在浏览器的请求中是有区别的：
- axios如果直接传对象，不指定是表单数据的话，会自动帮你转成json字符串给后端（后端可以使用@RequestBody接收参数，我试过使用Map可以接收到前端两个参数）
- 指定了表单数据头部的话，才会传表单数据（后端可以使用@RequestParam来解析表单数据）