RESTful get method to pass the JSON format back-end 400 solution

Front end with Vue+axios back end with spring boot restful

Issue: The front-end GET request needs to pass the array field value back end due to the Tomcat version issue, the URL is not supported to accept special characters including [] {} and so on.

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

Baidu's search scheme is mostly to let the use of string form or urlencoding or post, get the method of the body to pass parameters, etc.

Using the above method can solve the problem, but the design to the front and rear end of the need to deal with, not conducive to pre-and post-separation development or posts query does not conform to the RESTful API specifications.

The problem URL is as follows:

1. ? cktbselected[]=elementid1&cktbselected[]=elementid2&page=1&size=10
2. Request Method:get

Personal Suggestion Solutions

1. Install QS

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

The option to specify the format of the arrayFormat 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 '

Serialization of 2.get parameters

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

Cases:

' Params ' is the URL parameter that will be sent with the request
Must be an unformatted object (plain objects) or Urlsearchparams object
Params: {
id:12345
},

' Paramsserializer ' is a function that is responsible for the ' params ' serialization
(e.g. Https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
Paramsserializer:function (params) {
Return Qs.stringify (params, {arrayformat: ' repeat '})

},

Effect:

? cktbselected=elementid1&cktbselected=elementid2&cktbselected=elementid4&page=1&size=10

3. The properties of the background object are received by,list<string>.

RESTful get method to pass the JSON format back-end 400 solution