Question 187816 in React native Question posted in
The official React Native documentation can be found here.

https request to localhost is blocked by ios simulator (react native)

I know that ios blocks cleartext request eg (http).
But i have a localhost https server running with a (self signed certificate).

Now i keep getting the error

[TypeError: Network request failed]

I have tried different solutions from stack overflow like changing the url from
https://localhost:3000/app/ to https://127.0.0.1:3000/app/ or to use my local ip eg https://10.20.200.50:3000/app/

But non seem to work.
Is the only option i have to whitelist my localhost url in the info.plist file? I would like to avoid this option since it seems like a weak hacky solution…

After checking the Info.plist file i noticed it is already in there..

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

And yet i still get the same error….

Fyi requests to an external api like https://www.boredapi.com/api/activity work fine.

So to summarize: How do i make an fetch request to a https localhost server from the ios simulator.

Tags:

2

Answers


  1. 0

    there can be multiple issues with it.

    • if your localhost running on the same machine.
    • check the iOS simulator has connected to internet. sometime the iOS simulator is not connected to the internet.
    • there is another solution that it ngrok . use this. it is a great tool
    Login or Signup to reply.
  2. 0
    1. Run ifconfig | grep inet in a terminal and locate an address like 192.168.x.x

    enter image description here

    1. Try using the above IP in the fetch URL.

    2. If still not working make sure your server is available when you access it with any browser locally at https://<IP>:3000/testendpoint or using CURL or using a tool like POSTMAN.

    3. Make sure your headers like Content-Type header are set correctly:

        Accept: 'application/json',  //<----
    'Content-Type': 'application/json', //<---
  },
  body: JSON.stringify({
    firstParam: 'val1',
    secondParam: 'val2',
  }),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search