一.首先说一下采用的技术:
前端:Vue,使用原始方法CDN引入,没采用cli,ajax使用的axios
后端:springboot MVC
二.再来说一下碰到的坑:
axios中使用post方法传参提交表单,后端没收到相应的参数,我f12看了看,参数是传了的,然后没定位到问题。网上查了查,并看了看post方法的源码,定位到了问题。当post方法提供了data对象时,post请求http字段中的content-type是
application/json;charset=UTF-8
而我们需要的content-type是
application/x-www-form-urlencoded
三.解决方法:
扫描二维码关注公众号,回复:
10779907 查看本文章
我按照网上的方法,使用qs解决问题。首先CDN引入qs,引入后可以获得一个Qs,利用stringify()方法处理所有的参数
const qs = Qs
var data = {
key1: value1,
key2: JSON.stringify(value2)
}
axios.post('https://xxx.com/api/xxx', qs.stringify(data))
.then(function (res) {
console.log(res)
})
.catch(function (err) {
console.log(err)
})
此时就说到第二个坑了,我的value2是一个数组,java又无法解析了,不能出现符号"[]",于是将 JavaScript 对象转换为字符串
JSON.stringify(value2)
最后解决了问题,成功对接接口