Why is axios returning a different responseURL than the request url?

Viewed 137

I am making an Axios GET request from my React Native app to my locally served backend.

The response "config" object shows a "baseURL" of "http://192.168.1.68:8080/api" and a "url" of "inventory?status=ALL&barcode=127035838".

The response "request" object shows a "_url" of "http://192.168.1.68:8080/api/inventory?status=ALL&barcode=127035838".

However! the response "responseURL" attribute shows a value of "http://192.168.1.68:8080/api/inventory?status=ALL&barcode=127035838%1D".

The request from the app is not finding the barcode, returning 204. Making the same request from Postman, I am able to find the barcode with a 200 status. This makes me believe the issue is not on the backend. I switched from Axios to fetch and found the same result.

It is my guess the additional "%1D" on the end of the barcode is the cause of frustration. Why is the rsponseURL different from the request url. Why is axios adding "1%D", and how can I make it stop? Is there something else going on?

My solution:

let uriSN = serialNumber;
uriSN = encodeURIComponent(serialNumber);
uriSN = uriSN.replace('%1D', '');

Encoding the barcode and then stripping it of the "1%D" solves the issue. I do not know if it is the best or complete solution.

1 Answers

%1D is the url-encoded hex for 29 which is an ASCII control character called the "group seperator" so your serialNumber might have this character which is being parsed accordingly (by design) through the encodeURIComponent function. This is known as "GIGO" (garbage in garbage out).

Related