React Native fetch () Permintaan Jaringan Gagal

Ketika saya membuat proyek baru menggunakan react-native init(RN versi 0.29.1) dan memasukkan metode render ke film demo facebook publik API, itu melempar a Network Request Failed. Ada jejak stack yang sangat tidak berguna dan saya tidak bisa men-debug permintaan jaringan di konsol chrome. Ini adalah pengambilan yang saya kirim:

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

Masalahnya di sini adalah bahwa iOS tidak mengizinkan permintaan HTTP secara default, hanya HTTPS. Jika Anda ingin mengaktifkan permintaan HTTP, tambahkan ini ke info.plist:

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

Tidak disarankan untuk mengizinkan semua domain untuk http. Buat pengecualian hanya untuk domain yang diperlukan.

Sumber: Mengkonfigurasi Pengecualian Keamanan Transport Aplikasi di iOS 9 dan OSX 10.11

Tambahkan berikut ini ke file info.plist aplikasi Anda:

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

Saya menggunakan localhostalamat itu, yang jelas salah. Setelah menggantinya dengan alamat IP server (di jaringan emulator itu), ia bekerja dengan sempurna.

Edit

Di Android Emulator, alamat mesin pengembangan adalah 10.0.2.2. Penjelasan lebih lanjut di sini

Untuk Genymotion, alamatnya adalah 10.0.3.2. Info lebih lanjut di sini

Bagi kami itu karena kami mengunggah file dan filePicker RN tidak memberikan tipe mime yang tepat. Itu hanya memberi kami 'gambar' sebagai tipenya. Kami perlu mengubahnya ke 'gambar / jpg' untuk membuat pengambilan berfungsi.

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

Bereaksi Dokumen Asli memberikan jawaban untuk ini.

Apple telah memblokir pemuatan sumber daya HTTP cleartext implisit. Jadi kita perlu menambahkan file Info.plist (atau setara) proyek berikut ini.

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

Bereaksi Dokumen Asli -> Integrasi Dengan Aplikasi yang Ada -> Uji integrasi Anda -> Tambahkan pengecualian Keamanan Transport Aplikasi

Masalahnya mungkin dalam konfigurasi server.

Android 7.0 memiliki bug yang dijelaskan di sini . Solusi yang diusulkan oleh Vicky Chijwani:

Konfigurasikan server Anda untuk menggunakan kurva elips prime256v1. Misalnya, di Nginx 1.10 Anda melakukan ini dengan mengatur ssl_ecdh_curve prime256v1;

Saya mendapat masalah yang sama di Android tetapi saya berhasil menemukan solusi untuk itu. Android memblokir lalu lintas cleartext (non-https-request) sejak API Level 28 secara default. Namun, react-asli menambahkan konfigurasi keamanan jaringan ke versi debug ( android/app/src/debug/res/xml/react_native_config.xml) yang mendefinisikan beberapa domain (localhost, dan IP host untuk AVD / Genymotion), yang dapat digunakan tanpa SSL dalam mode dev. Anda dapat menambahkan domain Anda di sana untuk memungkinkan permintaan http.

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

Saya mendapat masalah yang sama di Android 9 karena "http" dan masalah diselesaikan dengan hanya menambahkan android: usingCleartextTraffic = "true" di 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>

Saya menemukan masalah yang sama pada Android Emulator, di mana saya mencoba mengakses URL HTTPS eksternal dengan sertifikat yang valid. Tetapi gagal mengambil URL itu dalam bahasa asli

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

1) Untuk mengetahui kesalahan yang sebenarnya dalam log, saya pertama kali mengaktifkan 'Debug JS Remotely' menggunakan Cmd + M pada aplikasi

2) Kesalahan yang dilaporkan adalah

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

3) Saya menambahkan sertifikat URL yang valid menggunakan metode ini -> LANGKAH 2

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

Sertifikat ini ditambahkan ke tab Pengguna.

4) Tambahkan atribut android:networkSecurityConfigatribut ke AndroidManifest.xml

Tambahkan file Konfigurasi Keamanan Jaringan 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>

Ini seharusnya bekerja dan memberi Anda respons yang diharapkan.

Saya mengalami masalah ini untuk Android-

URL- localhost / authToken.json - tidak berfungsi :(

URL- 10.106.105.103/authToken.json - tidak berfungsi :(

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

Catatan - Gunakan ifconfigdi Linux atau ipconfigdi Windows untuk menemukan mesin IpAddress

Untuk pengguna Android:

1. Ganti localhosts ke alamat IP Lan karena ketika Anda menjalankan proyek pada perangkat Android, localhost menunjuk ke perangkat Android, alih-alih komputer Anda, contoh: ubah http://localostkehttp://192.168.1.123

2. Jika URL permintaan Anda adalah HTTPS dan perangkat Android Anda berada di bawah proxy, anggap Anda telah menginstal CA yang ditambahkan Pengguna (seperti CA burp suite atau CA Charles) di perangkat Android Anda, pastikan versi Android Anda di bawah Nougat (7.0) , karena : Perubahan pada Otoritas Sertifikat Tepercaya di Android Nougat
   

   CA yang ditambahkan pengguna
   Perlindungan semua data aplikasi adalah tujuan utama dari kotak pasir aplikasi Android. Android Nougat mengubah cara aplikasi berinteraksi dengan CA yang disediakan pengguna dan admin. Secara default, aplikasi yang menargetkan API level 24 akan — dengan desain — tidak menghormati CA semacam itu kecuali jika aplikasi secara eksplisit memilih. Pengaturan safe-by-default ini mengurangi permukaan serangan aplikasi dan mendorong penanganan yang konsisten terhadap data aplikasi berbasis jaringan dan file.

Untuk Android, Anda mungkin telah melewatkan untuk menambahkan izin di AndroidManifest.xml Perlu menambahkan izin berikut.

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

Saya punya masalah serupa. Dalam kasus saya, permintaan ke localhost berfungsi dan tiba-tiba berhenti. Ternyata masalahnya adalah saya mematikan wifi di ponsel android saya.

Ini bekerja untuk saya, android menggunakan tipe khusus dari alamat IP 10.0.2.2 kemudian nomor port

import { Platform } from 'react-native';

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

jika Anda menggunakan buruh pelabuhan untuk api REST, kasus yang bekerja bagi saya adalah untuk mengganti hostname: http://demo.test/apidengan mesin alamat ip: http://x.x.x.x/api. Anda bisa mendapatkan IP dari memeriksa IPv4 apa yang Anda miliki di jaringan nirkabel Anda. Anda juga harus mengaktifkan wifi dari ponsel.

Anda harus menangani kasus kesalahan di. Kemudian untuk mengambil API.

Sebagai contoh:

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. Tambahkan android:usesCleartextTraffic="true"baris di AndroidManifest.xml.

2. Hapus semua folder debug dari folder android Anda.

Anda dapat mengatasinya menggunakan ini:

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,
      });
    });

Hanya Anda memiliki Perubahan pada Ambil ....

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);
     });

Untuk perangkat Android, buka folder root proyek Anda dan jalankan perintah:

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

misalnya, adb reverse tcp:8088 tcp:8088

Ini akan membuat perangkat fisik Anda (yaitu ponsel Android) mendengarkan server localhost yang berjalan pada mesin pengembangan Anda (yaitu komputer Anda) di alamat http: // localhost: [your_own_server_port] .

Setelah itu, Anda dapat langsung menggunakan panggilan http:localhost:[your_port] /your_apiasli-reaksi Anda fetch().

Untuk android, tambahkan android: networkSecurityConfig = "@ xml / network_security_config" ke tag aplikasi di AndroidManifest.xml, seperti ini:

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

konten file network_security_config.xml:

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

Contoh:

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