RESTful Get方式传参json格式后端400 解决方案

Posted 2020-12-03 一个程序员的自我修养

前端采用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> 接收即可。