RESTful Get方式傳參json格式後端400 解決方案

前端採用vue+axios 後端採用spring boot restful 

問題： 前端get 請求須要傳遞array 字段值 後端因爲tomcat 版本問題，不支持url接受特殊字符包括 [] {} 等。

Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

百度搜索到的方案 大都是讓 採用字符串形式傳參 或者 urlencoding 或者 post 傳參、get方式 body傳參 等方式

採用以上方式是能夠解決問題，可是設計到先後端均須要處理，不利於先後分離開發 或者 post 查詢不符合 restful api 的 規範。

問題url以下：

1. ?ckTbSelected[]=elementId1&ckTbSelected[]=elementId2&page=1&size=10
2. Request Method:
   GET

我的建議解決方案

1. 安裝 qs

https://www.npmjs.com/package/qs

You may use the arrayFormat option to specify the format of the output array:

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'

 

2.get 參數序列化

https://www.kancloud.cn/yunye/axios/234845

例：

// `params` 是即將與請求一塊兒發送的 URL 參數
// 必須是一個無格式對象(plain object)或 URLSearchParams 對象
params: {
ID: 12345
},

// `paramsSerializer` 是一個負責 `params` 序列化的函數
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'repeat'})

},

效果：

?ckTbSelected=elementId1&ckTbSelected=elementId2&ckTbSelected=elementId4&page=1&size=10

 

 

 3. 後臺對象的屬性採用，List<String> 接收便可。