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> 接收即可。