最近使用Vue和Springboot做一个项目,需要添加一个User,从前端表单发起axios的post请求,然后发现了这个很折磨的错误。
问题
- Vue部分
- Springboot部分
- 发送的数据是:
结果,debug显示:
也就是说所有的参数都没有正确的传输到后端。
这之后,我尝试了jquery中的ajax的post请求,是可以正常传输的,传输的数据也不为null。
我又尝试了改为get请求,用参数形式传输,也是可以正常传输。
解决方法:
之后去查阅资料,发现有这么一个说法:
使用axios请求数据时,我们的 Content-Type 变成了 application/json;charset=utf-8
然后,因为我们的参数是 JSON 对象,axios 帮我们做了一个 stringify 的处理。
而且查阅 axios 文档可以知道:axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。
那么,这就与我们服务端要求的 ‘Content-Type’: ‘application/x-www-form-urlencoded’ 以及 @RequestParam 不符合。
那么,怎么解决呢?
这里,我选择了最简单的方式:引入qs板块。
$ npm install qs --save-dev
这样就可以正常的传输了!