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)

最後解決了問題，成功對接接口