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

Question

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.

Answer 1

1. Run ifconfig | grep inet in a terminal and locate an address like 192.168.x.x

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

3. 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.

4. 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',
  }),

As a last possible solution if none of the above work restart the metro server and the simulator.