I am not sure why I need to Encode path parameter TWICE to make the rest call with special chars to work?

Question

I have a rest call that Get's a product's ingredients and I use the product name as the path variable. I do allow any character used and I understand I need to do encodeURIComponent(name) to encode chars like "/" since they could be misinterpreted otherwise:

ProductController.js

loadProduct = function() {
....
this.productService.getProduct(encodeURIComponent(this.selectedProduct)).then{ ....}
}

productService.js

getProduct: function(productName) {
   let fullPath = "products/" + encodeURIComponent(productName);
   $http.get(fullPath) ....
}

I did some debugging on firefox and I noticed this: Scenario 1: using only 1 encodeURI at the "getProduct" function (original assumption): GET /products/test%2F
%2F is / status 400 bad request The "file column" in the Network tab shows the path as "test/" without the encoding

Scenario 2: using only 2 encodeURI at the both locations: GET /products/test%252F it seems because of 2nd encoding, the %25 is eocoding the % from %2F status OK - returned the correct product "test/" The "file column" in the Network tab shows the path as "test%2F" with the encoding correct on /

I am really confused here. I am not decoding on the fly or anything so really confused why i need to encode it twice or maybe I am using something wrong?

Answer 1

did you tried without encoding. Because the http packages will automatically do that encoding part you don't need to encode it. Please try without encoding.