React Native fetch Network Request Failed

Question

When I create a brand new project using react-native init  RN version 0 29 1  and put a fetch in the render method to the public facebook demo movie API  it throws a Network Request Failed  There is a very useless stack trace and I can t debug network requests in the chrome console  Here is the fetch I m sending   fetch  http   facebook github io react-native movies json          then  response    gt  response json           then  responseJson    gt            return responseJson movies                  catch  error    gt            console error error

User · Answer

Not recommended to allow all domains for http. Make an exception for just the necessary domains.

Source: Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11

Add the following to the info.plist file of your app:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

User · Answer

This is not an answer but option  I switched to https   github com joltup rn-fetch-blob It works good both for form-data and files

User · Answer

Just you have Changes in Fetch      fetch  http   facebook github io react-native movies json        then  response    gt  response json         then  responseJson    gt              return responseJson movies             alert  result   JSON stringify responseJson           this setState               dataSource this state dataSource cloneWithRows responseJson                     catch  error    gt             console error error

User · Answer

This worked for me  android uses a special type of IP address 10 0 2 2 then port number  import   Platform   from  react-native    export const baseUrl   Platform OS      android         http   10 0 2 2 3000       http   localhost 3000

User · Answer

For Android  you may have missed to add permission in AndroidManifest xml Need to add the following permission    lt uses-permission android name  android permission INTERNET    gt

User · Answer

if you use docker for the REST api  a working case for me was to replace hostname  http   demo test api with the machine ip address   http   x x x x api   You can get the IP from checking what ipv4 you have on your wireless network  You should have also the wifi from phone on

User · Answer

if you using localhost just change it   from  http   localhost 3030 to    http   10 0 2 2 3030

User · Answer

The problem may be in server configuration   Android 7 0 has a bug described here  Workaround proposed by Vicky Chijwani      Configure your server to use the elliptic curve prime256v1  For   example  in Nginx 1 10 you do this by setting ssl ecdh curve   prime256v1

User · Answer

The problem here is that iOS does not allow HTTP requests by default  only HTTPS  If you want to enable HTTP requests add this to your info plist    lt key gt NSAppTransportSecurity lt  key gt   lt dict gt       lt key gt NSAllowsArbitraryLoads lt  key gt       lt true  gt   lt  dict gt

User · Answer

For Android devices  go to your project root folder and run the command   adb reverse tcp  your own server port  tcp  your own server port    e g   adb reverse tcp 8088 tcp 8088  This will make your physical device i e  Android phone  listen to the localhost server running on your development machine  i e  your computer  on address http   localhost  your own server port     After that  you can directly use http localhost  your port   your api in your react-native fetch   call

User · Answer

For android  add android networkSecurityConfig   xml network security config  to application tag in AndroidManifest xml  like this        lt  xml version  1 0  encoding  utf-8   gt       lt manifest      gt           lt application android networkSecurityConfig   xml network security config                               gt                           lt  application gt       lt  manifest gt     network security config xml file content    lt  xml version  1 0  encoding  utf-8   gt   lt network-security-config gt   lt debug-overrides gt       lt trust-anchors gt           lt  -- Trust user added CAs while debuggable only -- gt           lt certificates src  user    gt       lt  trust-anchors gt   lt  debug-overrides gt    lt  -- let application to use http request -- gt   lt base-config cleartextTrafficPermitted  true    gt   lt  network-security-config gt

User · Answer

I was using localhost for the address  which was obviously wrong  After replacing it with the IP address of the server  in the network that emulator is   it worked perfectly   Edit  In Android Emulator  the address of the development machine is 10 0 2 2  More explanation here  For Genymotion  the address is 10 0 3 2  More info here

User · Answer

I got the same issue on Android but I managed to find a solution for it  Android is blocking cleartext traffic  non-https-requests  since API Level 28 by default  However  react-native adds a network-security-config to the debug version  android app src debug res xml react native config xml  which defines some domains  localhost  and the host IPs for AVD   Genymotion   which can be used without SSL in dev mode   You can add your domain there to allow http requests    lt  xml version  1 0  encoding  utf-8   gt   lt network-security-config gt     lt domain-config cleartextTrafficPermitted  true  gt       lt domain includeSubdomains  false  gt localhost lt  domain gt       lt domain includeSubdomains  false  gt 10 0 2 2 lt  domain gt       lt domain includeSubdomains  false  gt 10 0 3 2 lt  domain gt       lt domain includeSubdomains  true  gt dev local lt  domain gt     lt  domain-config gt   lt  network-security-config gt

User · Answer

I have similar problem   In my case requests to localhost was working and suddenly stopped  It turn out that the problem was that I was turn off my wifi on my android phone

User · Answer

in my case i have https url but fetch return Network Request Failed error so i just stringify the body and it s working fun  x000D   x000D  fetch  https   mywebsite com endpoint        method   POST     headers        Accept   application json        Content-Type    application json         body  JSON stringify       firstParam   yourValue       secondParam   yourOtherValue           x000D   x000D   x000D

User · Answer

I got the same issue on Android 9 because of the  http  and issue resolved by just adding android usesCleartextTraffic  true  in  AndroidManifest xml     lt uses-permission android name  android permission INTERNET    gt   lt uses-permission android name  android permission READ EXTERNAL STORAGE   gt   lt uses-permission android name  android permission WRITE EXTERNAL STORAGE   gt   lt application   android usesCleartextTraffic  true           gt            lt  application gt

User · Answer

Add android usesCleartextTraffic  true  line in AndroidManifest xml  Delete all debug folder from your android folder

User · Answer

React Native Docs gives the answer for this      Apple has blocked implicit cleartext HTTP resource loading  So we need to add the following our project s Info plist  or equivalent  file     lt key gt NSAppTransportSecurity lt  key gt   lt dict gt       lt key gt NSExceptionDomains lt  key gt       lt dict gt           lt key gt localhost lt  key gt           lt dict gt               lt key gt NSTemporaryExceptionAllowsInsecureHTTPLoads lt  key gt               lt true  gt           lt  dict gt       lt  dict gt   lt  dict gt    React Native Docs -  Integration With Existing Apps -  Test your integration -  Add App Transport Security exception

User · Answer

For Android user      Replace localhosts to a Lan IP addresses because when you run the project on an Android device  localhost is pointing to the Android device  instead of your computer  example  change http   localost to http   192 168 1 123   If your request URL is HTTPS and your Android device is under a proxy  assume you have installed User-added CA like burp suite s CA or Charles s CA  in your Android device  make sure your Android version is below Nougat 7 0   because  Changes to Trusted Certificate Authorities in Android Nougat      User-added CAs   Protection of all application data is a key goal of the   Android application sandbox  Android Nougat changes how applications   interact with user- and admin-supplied CAs  By default  apps that   target API level 24 will   by design   not honor such CAs unless the app   explicitly opts in  This safe-by-default setting reduces application   attack surface and encourages consistent handling of network and   file-based application data

User · Answer

You can handle it using this   catch  error    gt          this setState           typing animation button  false                  console log error         if   Timeout      Network request failed             toast show   true          toast type    error           toast text    Network failure                 this setState           disable button  false

User · Answer

For us it was because we were uploading a file and the RN filePicker did not give the proper mime type  It just gave us  image  as the type  We needed to change it to  image jpg  to get the fetch to work   form append uploadFileName      uri   localImage full    type   image jpeg     name  uploadFileName

User · Answer

By running the mock-server on 0 0 0 0  Note  This works on Expo when you are running another server using json-server  Another approach is to run the mock server on 0 0 0 0 instead of localhost or 127 0 0 1  This makes the mock server accessible on the LAN and because Expo requires the development machine and the mobile running the Expo app to be on the same network the mock server becomes accessible too  This can be achieved with the following command when using json-server json-server --host 0 0 0 0 --port 8000   db json --watch Visit this link for more information

User · Answer

You should handle the error case in  then for fetch API   For example   fetch authURl   method   GET     then  response    gt            const statusCode   response status    console warn  status Code  statusCode     if statusCode  200         success code    else        handle other error code              err    gt      console warn  error  err      catch  error    gt      console error error     return error

User · Answer

I came across the same issue on Android Emulator  where I tried to access an external HTTPS URL with a valid certificate  But fetching that URL in react-native failed    fetch error       TypeError  Network request failed  sourceURL   http   10 0 2 2 8081 index delta platform android amp dev true amp minify false      1  To find out the exact error in the logs  I first enabled  Debug JS Remotely  using Cmd   M on the app  2  The error reported was  java security cert CertPathValidatorException  Trust anchor for certification path not found    3  I added the URL s valid certificate using this method -  STEP 2  http   lpains net articles 2018 install-root-ca-in-android    This certificate gets added to the User tab   4  Add the attribute android networkSecurityConfig attribute to AndroidManifest xml  Add a Network Security Configuration file res xml network security config xml    lt network-security-config gt       lt base-config gt           lt trust-anchors gt               lt certificates src  user   gt               lt certificates src  system   gt           lt  trust-anchors gt       lt  base-config gt   lt  network-security-config gt    This should work and give you an expected response

User · Answer

I was having this problem for Android-  URL- localhost authToken json - didn t work     URL- 10 106 105 103 authToken json - didn t work     URL- http   10 106 105 103 authToken json - worked     D  Note- Use ifconfig on Linux or ipconfig on Windows to find machine IpAddress

User · Answer

The solution is simple update nodejs version 14 or higher

User · Answer

In my case  the Android emulator wasn t connected to the Wi-Fi  See here Android Studio - Android Emulator Wifi Connected with No Internet

[javascript] React Native fetch() Network Request Failed

Examples related to javascript

Examples related to react-native

Examples related to fetch-api