aixos post请求 参数传递失败

最近使用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

在这里插入图片描述
这样就可以正常的传输了!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值