origin
Once upon a time, when making a data search box, it was found that the search content with special characters would lead to search exceptions. In the second scenario, in fitTime background management system, the parentheses in the food material input are searched, causing an interface error of 400.
Investigate by
By looking closely at the code, I saw that the search content was not encoded, so I confirmed that the bug was caused by the search content with special characters.
explore
So I confidently used encodeURIComponent to encode the search content. However, a surprise happened. The interface still reported an error. Open the console and see that the brackets are not encoded.
This is very angry. Then look at the code
The this.$get() method is mounted on the VUE global instance by wrapping axios. Encoding the parameters and then spelling them in the URL is OK.
To investigate
In desperation, open axios to view the source code and do a buildURL on the request parameters when creating the XHR request. Methods path is: axios/lib/helper/builderUrl js records that such a thing in this file:
This means encodeURIComponent encoding the argument and escaping the following special characters. As a result, the requested URL will still display “[” and “]” when entering parentheses.
justice
Our mission is to see justice done and bugs solved. So how can we properly encode this special character without changing the source code?
In fact, the answer is very simple, the parameters are not in params. Less complicated axios’s handling of the url, is only performed combineURLs, file path: (axios/lib/helpers/combineURLs. Js)
We can solve this problem perfectly by manually encoding the parameters and concatenating them into a string and then spelling them back into the URL.
Here is another example of the modified code for comparison:
