vue axios 请求后端无法传参问题

问题描述

在学习vue时，使用axios调用后端，发现无法把参数正确传到后端，现象如下：

1. 使用vue发起请求，浏览器上已经有传参，但是后端没接收到对应的用户名密码：
   
   

2. 使用postman发起请求，后端可以接收
   
   

处理过程

使用postman发送，一切正常，说明vue的axios配置有问题，或者是我的参数穿的格式不对，参数我是这么传的，一个对象，按道理来说没啥问题，我认为后端会把这个json对象解析付给入参，但是结果却没有：

网上搜了一下，需要添加form表单头部到axios的header配置中：

{ "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" }

再次发起请求：
载荷里面的内容发生了变化，请求载荷变成了表单数据

后端成功解析到请求参数：

总结

一开始以为请求载荷就是post请求里的表单数据，后面才发现这两个在浏览器的请求中是有区别的：

1. axios如果直接传对象，不指定是表单数据的话，会自动帮你转成json字符串给后端（后端可以使用@RequestBody接收参数，我试过使用Map可以接收到前端两个参数）
2. 指定了表单数据头部的话，才会传表单数据（后端可以使用@RequestParam来解析表单数据）