GET request to API with % as part of query, URI malformed error is thrown

Current behavior:

When a GET request is made to API with % as part of query, URI malformed error is thrown. For eg, GET request to /api/query?tag=10%

Works on Chrome browser:

But not when Cypress test is run:

Desired behavior:

API call with % should be decoded correctly and should behave as on Chrome.

I am not entirely sure if issues 2372 and 5274 are relevant to this.

Test code to reproduce

I have created a repository here for the steps to be reproduced. express app to serve static html file and handle API request

Versions

Cypress: ^5.0.0 Chrome: Version 84.0.4147.125 (Official Build) (64-bit) OS: macOS Mojave Version 10.14.2

[eugeneoei]

@sinharaksh1t i made the changes according to your suggestion and ran the test case again. you are right!! URI malformed error is no longer thrown after encoding the query params.

And now it made me realised I actually should be using encodeURIComponent in all the API calls involving query params on the URL made from the front-end application I’m working on. Currently, the API I did “decodes” by running a regex which will no longer be needed if encodeURIComponent is used on the front-end application. Thanks for the tip!

I guess this is technically not a bug and can be closed? what do you think @jennifer-shehane ?

[sinharaksh1t]

@eugeneoei since we know that Cypress is calling JavaScript’s decodeURIComponent on the URL, have you tried encoding the query parameters in the URL before making the call? Not sure if this will help, but in the codebase of where I work, we use JavaScript’s encodeURIComponent for some API calls where we need to specifically append query params on the URL.

Below is an example from your own example repo to demonstrate what I mean:

axios.get(`/api/query?tag=${encodeURIComponent(10%)}`)
					.then(function (response) {
						...do something
					})
					.catch(function (error) {
						...do something else after catch
					})