CODEWITHSUNDEEP
javascriptreactjsreact-nativefetchexpo
ausavi
ausavi

Reputation: 53

React Native fetch https localhost network request failed

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?

Upvotes: 1

Views: 1648

Answers (1)

Kathan Patel
Kathan Patel

Reputation: 368

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>

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

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

Upvotes: 1

Related Questions