React Native fetch https localhost network request failed

Question

I'm trying to fetch a locally hosted API from ASP.NET server:

  try {
    const response = await fetch(`https://localhost:2318/api/Restaurant`)
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error(error)
  }

However, it throws an error:

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0

None of my endpoints work. Fetching from public APIs works. Also strange that opening the fetching url https://localhost:2318/api/Restaurant in Safari inside the simulator works and returns the data as expected.

I'm using Expo v42.0.1, RN v0.66.

Any ideas?

Answer 1

You are making a request to the localhost server which is going to have a self-signed certificate. So either iOS or Android won't allow fetching from that API straightaway.

The easiest solution would be using react-native-fetch-blob. (Just pass trusty as true).

RNFetchBlob.config({
  trusty : true
})
.then('GET', 'https://example.com')
.then((resp) => {
  // ...
})

And if you still want to use fetch and try the below solution.

1. If you are using the iOS device to test : You can do two things:

• Either you can make an HTTP call (change https to http in your url) using the below implementation.

If you want to enable HTTP requests add this to your info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

• You can use HTTPS (self-signed) calls using the below implementation.

  React-native fetch() from https server with self-signed certificate

2. If you are using an Android device to test :

   Try the below solution : https://stackoverflow.com/a/55246927/8893384