Помилка запиту на реакцію на Native ()

Коли я створюю новий проект з використанням react-native init(RN версії 0.29.1) та поставити вибірки в методі візуалізації для громадськості facebook демо кіно API, він кидає Network Request Failed. Існує дуже марний слід стека, і я не можу налагоджувати мережеві запити в хромованій консолі. Ось вибір, який я надсилаю:

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

Проблема тут полягає в тому, що iOS не дозволяє HTTP-запити за замовчуванням, лише HTTPS. Якщо ви хочете ввімкнути HTTP-запити, додайте це до свого info.plist:

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

Не рекомендується дозволяти всі домени для http. Зробіть виняток лише для необхідних доменів.

Джерело: Налаштування винятків безпеки транспорту додатків у iOS 9 та OSX 10.11

Додайте до файлу info.plist програми:

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

Я використовував localhostадресу, що, очевидно, було неправильним. Замінивши його IP-адресою сервера (у мережі, в якій є емулятор), він працював чудово.

Редагувати

В Android Emulator адреса машини для розробки 10.0.2.2. Більше пояснення тут

Для Genymotion адреса є 10.0.3.2. Більше інформації тут

Для нас це було тому, що ми завантажували файл, а RN-файлPicker не надав належного типу mime. Це просто дало нам "образ" як тип. Нам потрібно було змінити його на "image / jpg", щоб змусити роботу працювати.

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

Відповідь на це дає React Native Docs.

Apple заблокувала неявну завантаження ресурсів HTTP ясного тексту. Тому нам потрібно додати наступний файл Info.plist нашого проекту (або еквівалентний) нашого проекту.

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

React Native Docs -> Інтеграція з існуючими програмами -> Перевірте інтеграцію -> Додати виняток безпеки транспортного забезпечення додатків

Проблема може бути в налаштуваннях сервера.

Android 7.0 має помилку, описану тут . Запропонований рішенням Вікі Чівані:

Налаштуйте ваш сервер для використання еліптичної кривої prime256v1. Наприклад, у Nginx 1.10 ви робите це, встановлюючи ssl_ecdh_curve prime256v1;

У мене виникла та ж проблема на Android, але мені вдалося знайти рішення. Android блокує трафік прозорого тексту (не-https-запити), оскільки рівень API 28 за замовчуванням. Однак натискання реакцій додає мережеву безпеку-конфігурацію до версії налагодження ( android/app/src/debug/res/xml/react_native_config.xml), яка визначає деякі домени (localhost та хост-IP-адреси для AVD / Genymotion), які можна використовувати без SSL в режимі розробки. Ви можете додати свій домен туди, щоб дозволити 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>

Я отримав ту ж проблему на Android 9 через "http" і проблему вирішено просто додаванням андроїда: usesCleartextTraffic = "true" в 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>

Я натрапив на цю ж проблему на Android Emulator, де спробував отримати доступ до зовнішньої URL-адреси HTTPS з дійсним сертифікатом. Але отримати цю URL-адресу в реальній реакції не вдалося

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

1) Щоб дізнатися точну помилку в журналах, я спершу ввімкнув "Налагодження JS віддалено" за допомогою Cmd + M у додатку

2) Повідомлена помилка була

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

3) Я додав дійсний сертифікат URL за допомогою цього методу -> КРОК 2

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

Цей сертифікат додається на вкладку Користувач.

4) Додайте атрибут android:networkSecurityConfigатрибута до AndroidManifest.xml

Додайте файл налаштування мережевої безпеки 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>

Це має спрацювати і дати очікуваний відгук.

У мене була ця проблема для Android-

URL- localhost / authToken.json - не працює :(

URL- 10.106.105.103/authToken.json - не працює :(

URL- http://10.106.105.103/authToken.json - працював :): D

Примітка. Використовуйте ifconfigв Linux або ipconfigWindows, щоб знайти машинний IpAddress

Для користувача Android:

1. Замініть localhosts на IP-адреси Лана, оскільки коли ви запускаєте проект на пристрої Android, localhost вказує на пристрій Android, а не на комп'ютер, наприклад: змінити http://localostнаhttp://192.168.1.123

2. Якщо у вашій URL-адресі запиту є HTTPS, а ваш пристрій Android знаходиться під проксі-сервером, припустімо, що на вашому пристрої Android встановлено доданий користувачем CA (наприклад, Burp suite CA або Charles's CA), переконайтеся, що версія Android знаходиться нижче Nougat (7.0) , оскільки : Зміни довірених авторизованих сертифікатів в Android Nougat
   

   
   Захищені ЦА захист усіх даних програм є ключовою метою пісочної програми Android. Android Nougat змінює взаємодію програм на взаємодії з ОС, що надаються користувачем та адміністратором. За замовчуванням програми, які орієнтуються на рівень API 24, - за задумом - не вшановуватимуть таких ЦА, якщо програма явно не включить. Цей параметр безпечного за замовчуванням зменшує поверхню атаки додатків та заохочує послідовну обробку даних мережевих та файлових програм.

Для Android, можливо, ви пропустили додати дозвіл в AndroidManifest.xml Потрібно додати наступний дозвіл.

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

У мене є аналогічна проблема. У моєму випадку запити до localhost працювали і раптом припинялися. Виявилося, що проблема полягала в тому, що я відключив wifi на своєму телефоні Android.

Це працювало для мене, а Android використовує спеціальний тип IP-адреси 10.0.2.2, а потім номер порту

import { Platform } from 'react-native';

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

якщо ви використовуєте докер для REST API, робочий випадок для мене повинен був замінити ім'я хоста: http://demo.test/apiз IP - адресою машини: http://x.x.x.x/api. Ви можете отримати IP, перевіривши, який у вас ipv4 у вашій бездротовій мережі. Ви також повинні мати Wi-Fi з телефону.

Вам слід обробити випадок помилки в .then для отримання API.

Наприклад:

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.

2. Видаліть всю папку налагодження зі своєї папки Android.

Ви можете впоратися з цим:

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

Просто у вас є зміни у витязі ....

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 перейдіть до кореневої папки проекту та запустіть команду:

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

наприклад, adb reverse tcp:8088 tcp:8088

Це зробить ваш фізичний пристрій (тобто телефон Android) слухати сервер localhost, який працює на вашій розроблювальній машині (тобто ваш комп'ютер) за адресою http: // localhost: [your_own_server_port] .

Після цього ви можете безпосередньо скористатися http:localhost:[your_port] /your_apiу своєму реальному fetch() дзвінку.

Для android додайте android: networkSecurityConfig = "@ xml / network_security_config" в тег додатка в AndroidManifest.xml, як це:

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

Вміст файлу 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>

Приклад:

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