Yerel Getirme () Ağ İsteği Başarısız Oldu

react-native init(RN sürüm 0.29.1) kullanarak yepyeni bir proje oluşturduğumda ve genel facebook demo film API'sına render yönteminde bir getirme yaptığımda, bir atar Network Request Failed. Çok işe yaramaz bir yığın izleme var ve krom konsolunda ağ isteklerinde hata ayıklama yapamıyorum. İşte gönderdiğim getirme:

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

Buradaki sorun, iOS'un varsayılan olarak HTTP isteklerine izin vermemesi, yalnızca HTTPS olmasıdır. HTTP isteklerini etkinleştirmek istiyorsanız bunu aşağıdakilere ekleyin info.plist:

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

Http için tüm alan adlarına izin verilmesi önerilmez. Yalnızca gerekli alanlar için bir istisna yapın.

Kaynak: iOS 9 ve OSX 10.11'de Uygulama Aktarımı Güvenlik İstisnalarını Yapılandırma

Aşağıdakileri uygulamanızın info.plist dosyasına ekleyin:

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

localhostAçıkçası yanlış olan adres için kullanıyordum . Sunucunun IP adresi (taklitçinin olduğu ağda) ile değiştirdikten sonra mükemmel çalıştı.

Düzenle

Android Emulator'da geliştirme makinesinin adresi 10.0.2.2. Burada daha fazla açıklama

Genymotion için adres 10.0.3.2. Daha fazla bilgi burada

Bizim için bir dosya yüklüyorduk ve RN filePicker uygun mime türünü vermedi. Sadece bize 'görüntü' türünü verdi. Getirmenin çalışması için onu 'image / jpg' olarak değiştirmemiz gerekiyordu.

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

Bunun için Native Docs'a tepki verin.

Apple, örtük açık metin HTTP kaynak yüklemesini engelledi. Bu nedenle, projemizin Info.plist (veya eşdeğeri) dosyasını eklememiz gerekiyor.

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

Yerel Belgeleri Tepki Etme -> Mevcut Uygulamalarla Entegrasyon -> Entegrasyonunuzu test etme -> Uygulama Aktarımı Güvenliği istisnası ekleme

Sorun sunucu yapılandırmasında olabilir.

Android 7.0'da burada açıklanan bir hata var . Vicky Chijwani tarafından önerilen geçici çözüm:

Sunucunuzu eliptik eğri prime256v1 kullanacak şekilde yapılandırın. Örneğin, Nginx 1.10'da bunu ssl_ecdh_curve prime256v1;

Aynı sorunu Android'de de aldım, ancak bunun için bir çözüm bulmayı başardım. Android varsayılan olarak API Seviye 28'den beri açık metin trafiğini (https olmayan istekler) engelliyor. Bununla birlikte, tepki yerel, hata ayıklama sürümüne ( android/app/src/debug/res/xml/react_native_config.xml) bazı etki alanlarını (yerel ana bilgisayar ve AVD / Genymotion için ana bilgisayar IP'leri) tanımlayan ve geliştirici modunda SSL olmadan kullanılabilen bir ağ-güvenlik-config ekler . Http isteklerine izin vermek için alan adınızı buraya ekleyebilirsiniz.

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

Çünkü sadece ekleyerek çözüldü "http" ve konunun Android 9 aynı sorunu var android: usesCleartextTraffic = "true" in 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>

Geçerli bir sertifikayla harici bir HTTPS URL'sine erişmeye çalıştığım Android Emulator'da da aynı sorunla karşılaştım. Ancak yerel URL'de bu URL getirilemedi

'fetch error:', { [TypeError: Network request failed]
sourceURL: 'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false' }

1) Günlüklerdeki kesin hatayı bulmak için, önce uygulamada Cmd + M kullanarak 'Uzaktan JS Hata Ayıkla' özelliğini etkinleştirdim

2) Bildirilen hata:

java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

3) Bu yöntemi kullanarak URL'nin geçerli sertifikasını ekledim -> 2. ADIM

http://lpains.net/articles/2018/install-root-ca-in-android/

Bu sertifika Kullanıcı sekmesine eklenir.

4) android:networkSecurityConfigAndroidManifest.xml'e özellik niteliğini ekleyin

Ağ Güvenliği Yapılandırma dosyası ekleme res/xml/network_security_config.xml:

<network-security-config>
    <base-config>
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </base-config>
</network-security-config>

Bu işe yaramalı ve size beklenen bir yanıt vermelidir.

Android için bu sorunu yaşıyordum.

URL- localhost / authToken.json - çalışmadı :(

URL- 10.106.105.103/authToken.json - çalışmadı :(

URL- http://10.106.105.103/authToken.json - çalıştı :): D

Not - IpAddress makinesini bulmak ifconfigiçin Linux veya ipconfigWindows üzerinde kullanın

Android kullanıcısı için:

1. Değiştir localhostBir Android cihazda projeyi çalıştırdığınızda, localhost Android cihazı işaret çünkü yerine bilgisayar, örneğin, bir Lan IP adreslerine s: değişiklik http://localostiçinhttp://192.168.1.123

2. İsteğiniz URL HTTPS ve Android cihazınız vekil altında ise, Kullanıcı tarafından eklenen CA yüklemiş varsayalım Android cihazda (Attıracağın süitin CA veya Charles CA gibi), Emin Android sürüm altındadır yapmak NOUGAT (7.0) nedeniyle, : Android Nuga'da Güvenilir Sertifika Yetkililerindeki Değişiklikler
   

   Kullanıcı tarafından eklenen CA'lar
   Tüm uygulama verilerinin korunması, Android uygulama sanal alanının önemli bir hedefidir. Android Nougat, uygulamaların kullanıcı ve yönetici tarafından sağlanan CA'larla etkileşimini değiştirir. Varsayılan olarak, API düzeyi 24'ü hedefleyen uygulamalar, uygulama açıkça kabul etmedikçe, tasarım gereği bu tür CA'ları onurlandırmaz. Varsayılan olarak güvenli olan bu ayar, uygulama saldırı yüzeyini azaltır ve ağ ve dosya tabanlı uygulama verilerinin tutarlı bir şekilde kullanılmasını teşvik eder.

Android için AndroidManifest.xml dosyasına izin eklemeyi kaçırmış olabilirsiniz Aşağıdaki izni eklemeniz gerekir.

<uses-permission android:name="android.permission.INTERNET" /> 

Benzer bir sorunum var. Benim durumumda localhost'a yapılan istekler çalışıyordu ve aniden durdu. Sorunun android telefonumdaki wifi'mi kapatması olduğu ortaya çıktı.

Bu benim için çalıştı, android 10.0.2.2 sonra bağlantı noktası numarası özel bir tür kullanır

import { Platform } from 'react-native';

export const baseUrl = Platform.OS === 'android' ?
    'http://10.0.2.2:3000/'
: 
'http://localhost:3000/';

REST api için docker kullanırsanız, benim için çalışan bir durum hostname: yerine http://demo.test/apimakinenin ip adresi: idi http://x.x.x.x/api. IP'yi kablosuz ağınızda hangi ipv4'e sahip olduğunuzu kontrol ederek alabilirsiniz. Ayrıca telefondan wifi olmalıdır.

Hata alma durumunu .then API'sı için ele almalısınız.

Örneğin:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});

1. android:usesCleartextTraffic="true"AndroidManifest.xml dosyasına satır ekleyin .

2. Android klasörünüzden tüm hata ayıklama klasörünü silin.

Bunu kullanarak halledebilirsiniz:

catch((error) => {
      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,
      });
    });

Yalnızca Getirilen Değişiklikler var ....

fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
        /*return responseJson.movies; */
        alert("result:"+JSON.stringify(responseJson))
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseJson)
        })
     }).catch((error) => {
         console.error(error);
     });

Android cihazlar için proje kök klasörünüze gidin ve şu komutu çalıştırın:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

Örneğin, adb reverse tcp:8088 tcp:8088

Bu, fiziksel cihazınızın (yani Android telefonun) http: // localhost: [your_own_server_port] adresindeki geliştirme makinenizde (yani bilgisayarınızda) çalışan localhost sunucusunu dinlemesini sağlayacaktır .

Bundan sonra, doğrudan http:localhost:[your_port] /your_apiyerel yanıt fetch() çağrınızda kullanabilirsiniz.

Android için AndroidManifest.xml'deki uygulama etiketine android: networkSecurityConfig = "@ xml / network_security_config" ekleyin:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config"
                        ... >
            ...
        </application>
    </manifest>

network_security_config.xml dosya içeriği:

<?xml version='1.0' encoding='utf-8'?>
<network-security-config>
<debug-overrides>
    <trust-anchors>
        <!-- Trust user added CAs while debuggable only -->
        <certificates src="user" />
    </trust-anchors>
</debug-overrides>

<!-- let application to use http request -->
<base-config cleartextTrafficPermitted="true" />
</network-security-config>

Misal:

return fetch('http://<your ip>')
  .then((response) => response.json())
  .then((responseJson) => {
    console.log(responseJson)
  })
  .catch((error) => {
    console.error(error);
  });