javascript - React Native fetch() Sieťová požiadavka zlyhala

Keď vytváram úplne nový projekt pomocou react-native init (verzia RN 0.29.1) a vložím fetch do metódy render na verejné demo API filmov Facebooku, vyhodí to Network Request Failed. Existuje veľmi nepoužiteľný stack trace a nemôžem debugovať sieťové požiadavky v konzole Chrome. Tu je fetch, ktorý posielam:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

Odpoveď č. 1

Problém je v tom, že iOS štandardne nepovoľuje HTTP požiadavky, len HTTPS. Ak chcete povoliť HTTP požiadavky, pridajte toto do vášho info.plist:

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

Odpoveď č. 2

Používal som localhost ako adresu, čo bolo očividne zlé. Po jej nahradení IP adresou servera (v sieti, v ktorej je emulátor) to fungovalo perfektne.

Upraviť

V Android emulátore je adresa vývojového počítača 10.0.2.2. Viac vysvetlenia tu

Pre Genymotion je adresa 10.0.3.2. Viac informácií tu

Odpoveď č. 3

Neodporúča sa povoliť všetky domény pre HTTP. Urobiť výnimku len pre potrebné domény.

Zdroj: Konfigurácia výnimiek zabezpečenia prenosu aplikácií v iOS 9 a OSX 10.11

Pridajte nasledujúce do súboru info.plist vašej aplikácie:

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

Odpoveď č. 4

Mal som rovnaký problém na Android 9 kvôli „http“ a problém sa vyriešil jednoducho pridaním android:usesCleartextTraffic="true" do AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
  android:usesCleartextTraffic="true"
 .......>
 .......
</application>

Odpoveď č. 5

Pre nás to bolo preto, že sme nahrávali súbor a RN filePicker nedal správny MIME typ. Dalo nám len 'image' ako typ. Potrebovali sme to zmeniť na 'image/jpg', aby fetch fungoval.

form.append(uploadFileName, {
  uri : localImage.full,
  type: 'image/jpeg',
  name: uploadFileName
 })

Odpoveď č. 6

ak používate localhost, jednoducho to zmeňte :

z :http://localhost:3030 na :http://10.0.2.2:3030

Odpoveď č. 7

Mal som rovnaký problém na Androide, ale podarilo sa mi nájsť riešenie. Android predvolene blokuje nešifrovanú komunikáciu (požiadavky mimo HTTPS) od API Level 28. Avšak react-native pridáva do debug verzie konfiguráciu siete (android/app/src/debug/res/xml/react_native_config.xml), ktorá definuje niektoré domény (localhost a hostiteľské IP pre AVD/Genymotion), ktoré môžu byť v vývojovom režime používané bez SSL. Do toho súboru môžete pridať aj vašu doménu, aby boli povolené HTTP požiadavky.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    <domain includeSubdomains="true">dev.local</domain>
  </domain-config>
</network-security-config>

Odpoveď č. 8

Pre používateľov Androidu:

  1. Nahraďte localhost IP adresami LAN, pretože keď spustíte projekt na zariadení s Androidom, localhost ukazuje na zariadenie s Androidom, namiesto vášho počítača, napríklad: zmeňte http://localhost na http://192.168.1.123

  2. Ak je vaša požiadavka URL HTTPS a vaše zariadenie Android je pod proxy, predpokladajte, že ste nainštalovali CA pridanú používateľom (napríklad CA Burp Suite alebo CA Charles) vo vašom zariadení Android, uistite sa, že verzia Androidu je nižšia ako Nougat (7.0), pretože: Zmeny v dôveryhodných certifikačných autoritách v Android Nougat

    Dodané CA používateľom
    Ochrana všetkých údajov aplikácie je kľúčovým cieľom piaskoviska aplikácií Android. Android Nougat mení spôsob, akým aplikácie interagujú s CAs dodanými používateľmi a administrátormi. Predvolene aplikácie, ktoré cielia na úroveň API 24, tieto CAs nebudú uznávať—z dôvodu návrhu—pokým sa aplikácia výslovne nerozhodne ich používať. Toto predvolené bezpečné nastavenie znižuje útokový povrch aplikácie a podporuje konzistentné spracovanie dát aplikácie prenášaných po sieti a uložených vo súboroch.

Odpoveď č. 9

Dokumentácia React Native poskytuje na to odpoveď.

Apple zablokoval implicitné načítavanie zdrojov cez nezabezpečený HTTP. Preto musíme pridať nasledujúce do súboru Info.plist (alebo ekvivalentného) nášho projektu.

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

React Native Dokumentácia -> Integrácia s existujúcimi aplikáciami -> Otestujte svoju integráciu -> Pridajte výnimku App Transport Security

Odpoveď č. 10

Problém môže byť v konfigurácii servera.

Android 7.0 má chybu popísanú tu. Obchádzka navrhnutá Vicky Chijwani:

Nakonfigurujte svoj server tak, aby používal eliptickú krivku prime256v1. Napríklad v Nginx 1.10 to urobíte nastavením ssl_ecdh_curve prime256v1;

Odpoveď č. 11

Mal som tento problém s Androidom-

URL- localhost/authToken.json - nefungovalo :(

URL- 10.106.105.103/authToken.json - nefungovalo :(

URL- http://10.106.105.103/authToken.json - fungovalo :) :D

Poznámka - Použite ifconfig na Linuxe alebo ipconfig na Windows na zistenie IP adresy stroja

Súvisiace články