最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git
前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶
在项目中需要用到axios与后端接口交互的时候,使用POST请求时,后台接收不到前台传的数据
js代码如下:

export const addDataGroup = params => { return axios.post(`/remote/dataGroup/add`, params ); };

请求的数据是:

这里写图片描述

后台代码代码如下:
这里写图片描述

解决如下:
方法一 :在项目中安装qs库作为格式化的依赖:

npm install qs --save-dev 

修改js代码:

export const addDataGroup = params => { return axios.post(`/remote/dataGroup/add`, qs.stringify(params) ); };

方法二:如果不想修改前端代码的话,需要对后台的代码做修改:
通过翻看axios的文档得知:在axios使用Post发送数据时,默认是直接把json放到请求体中提交到后端的,而后端获取数据的方式有两种,一种是@RequestParam(通过字符串中解析出参数),另一种是@ResponseBody(从请求体中取参数),很显然,我们的后端用了第一种方式。

参考文档:http://www.jzdlink.com/studynotes/201709141385.html

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐