CODEWITHSUNDEEP
iosreact-nativeurlfetch-apiencode
MeApt
MeApt

Reputation: 21

React Native Fetch API In IOS Only Semicolon In Url Not Encoded

So I'm using React Native for an IOS App, and using Fetch API for networking. My URL is like this:

https://example.testing.com/filterString=product.code><CODE01;CODE02

and it's usually automatically encoded after I call the fetch method. It's supposed to be like below for my App to get the response correctly from the server:

https://example.testing.com/filterString=product.code%3E%3CCODE01%3BCODE02

But instead it become like this:

https://example.testing.com/filterString=product.code%3E%3CEKWED014T;EKWED014

So it won't encode ONLY the semicolon part of the url.

Here's my code:

const response = await fetch(url, { method, headers });

And here's how I found that my url isn't encoded correctly after being sent to the server:

const responseURL = await response.url
console.log('displayUrl: '+responseURL);

UPDATE:

I need to add that there is no option to encode the url before calling the "fetch" method, because it will still get encoded again, so it will get encoded twice.

For example, I encode just the semicolon:

"CODE01;CODE02" to "CODE01%3BCODE02"

The method would just pick the "%" and then it become:

"CODE01%253BCODE02"

Upvotes: 0

Views: 260

Answers (1)

redberry
redberry

Reputation: 766

You can utilise encodeURIComponent method to ensure your url is encoded correctly on both iOS and Android.

 const const baseUrl = 'https://example.testing.com/filterString=';
 const encodedProducts = encodeURIComponent('product.code><CODE01;CODE02');
 const url = baseUrl + encodedProducts;
 console.log(url) //results in https://example.testing.com/filterString=product.code%3E%3CCODE01%3BCODE02
 const response = await fetch(url, { method, headers });

Upvotes: 0

Related Questions