axios的post传递参数问题

一.首先说一下采用的技术：

前端：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

 

三.解决方法：

我按照网上的方法，使用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)

最后解决了问题，成功对接接口