Когда я создаю новый проект, используя response-native init (RN версии 0.29.1), и помещаю выборку в методе рендеринга в API общедоступного демонстрационного фильма facebook, он выдает Ошибка сетевого запроса. Это очень бесполезная трассировка стека, и я не могу отлаживать сетевые запросы в консоли Chrome. Вот результат, который я отправляю:

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

Ответы (29)

Проблема здесь в том, что iOS по умолчанию не разрешает HTTP-запросы, только HTTPS. Если вы хотите включить HTTP-запросы, добавьте это в свой info.plist:

NSAppTransportSecurity

    NSAllowsArbitraryLoads
    

Проблема может быть в конфигурации сервера.

Android 7.0 имеет ошибку , описанную здесь. Обход, предложенный Вики Чижвани:

Настройте свой сервер для использования эллиптической кривой prime256v1. За Например, в Nginx 1.10 вы делаете это, задав ssl_ecdh_curve prime256v1;

Я использовал localhost в качестве адреса, что, очевидно, было неправильным. После замены на IP-адрес сервера (в той сети, в которой находится эмулятор) он работал отлично.

Редактировать

В эмуляторе Android адрес машины разработки: 10.0.2.2. Подробнее здесь

Для Genymotion это адрес 10.0.3.2. Подробнее здесь

У меня была эта проблема для Android-

URL-адрес localhost / authToken.json - не работал: (

URL - 10.106.105.103/authToken.json - не сработало: (

URL- http://10.106.105.103/authToken.json - сработало :): D

Примечание. Используйте ifconfig в Linux или ipconfig в Windows, чтобы найти IP-адрес машины

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

Это сработало для меня, 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/';

For Android user:

  1. Замените localhosts на IP-адреса Lan, потому что при запуске проекта на устройстве Android localhost указывает на устройство Android, а не на ваш компьютер, например: изменить http://localost до http://192.168.1.123

  2. Если ваш URL-адрес запроса - HTTPS и ваше устройство Android находится под прокси-сервером, предположим, что вы установили добавленный пользователем CA (например, CA Burp Suite или Charles CA) на своем устройстве Android, убедитесь, что ваша версия Android ниже Nougat (7.0), потому что: Изменения в доверенных центрах сертификации в Android Nougat

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

Я столкнулся с той же проблемой в эмуляторе Android, когда я пытался получить доступ к внешнему URL-адресу HTTPS с действующим сертификатом. Но получение этого URL-адреса в react-native не удалось

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


    
        
            
            
        
    

Это должно сработать и дать ожидаемый ответ.

В моем случае эмулятор Android не был подключен к Wi-Fi.

См. Здесь Android Studio - Android-эмулятор Wi-Fi без подключения к Интернету

, если вы используете localhost, просто измените его:

из:http://localhost: 3030 на:http://10.0.2.2: 3030

в моем случае у меня есть https url, но я получаю ошибку возврата Network Request Failed, поэтому я просто структурирую тело, и оно работает весело

fetch ('https://mywebsite.com/endpoint/', {
  метод: 'POST',
  заголовки: {
    Принять: 'application / json',
    'Content-Type': 'приложение / json'
  },
  body: JSON.stringify ({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue'
  })
});

Запустив mock-сервер на 0.0.0.0
Примечание: это работает на Expo, когда вы запускаете другой сервер с использованием json-server.


Другой подход - запустить фиктивный сервер на 0.0.0.0 вместо localhost или 127.0.0.1.

Это делает фиктивный сервер доступным в локальной сети, и поскольку Expo требует, чтобы машина разработки и мобильный компьютер, на котором запущено приложение Expo, находились в одной сети, фиктивный сервер также становится доступным.

Это может быть достигнуто с помощью следующей команды при использовании json-server

json-server --host 0.0.0.0 --port 8000 ./db.json --watch

Посетите эту ссылку для получения дополнительной информации.

"зависимости": {"react": "17.0.2", "react-native": "0.66.1"}, Я столкнулся с этой проблемой с эмулятором Android.

  1. Добавьте эти строки кода в AndroidManifest.xml

     <приложение
      ....
      ....
     android: usesCleartextTraffic = "true">
    
  2. Затем попробуйте запустить свой код на реальном физическом устройстве, а не в эмуляторе,
    для запуска на физических устройствах - подключите usb и попробуйте запустить npx react-native run-android

  1. Добавить android: usesCleartextTraffic = "true" строка в AndroidManifest.xml.

  2. Удалить всю папку отладки из папки Android.

У меня такая же проблема на Android, но мне удалось найти решение. Android блокирует трафик в открытом виде (не https-запросы), начиная с уровня API 28 по умолчанию. Однако response-native добавляет конфигурацию сетевой безопасности к отладочной версии (android / app / src / debug / res / xml / response_native_config.xml), который определяет некоторые домены (localhost и IP-адреса хостов). для AVD / Genymotion), который можно использовать без SSL в режиме разработки. Вы можете добавить туда свой домен, чтобы разрешить HTTP-запросы.



  
    localhost
    10.0.2.2
    10.0.3.2
    dev.local
  

Просто у вас есть Changes in Fetch ....

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

Для нас это произошло из-за того, что мы загружали файл, а RN filePicker не давал правильный тип mime. Он просто дал нам «изображение» как тип. Нам нужно было изменить его на image / jpg, чтобы заставить работать выборку.

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

У меня похожая проблема. В моем случае запросы к localhost работали и внезапно прекращались. Оказалось, что проблема заключалась в том, что я отключил Wi-Fi на своем телефоне Android.

Решение - простое обновление nodejs версии 14 или выше

Это не ответ, а вариант. Я перешел на https://github.com/joltup/rn-fetch-blob Хорошо работает как с формами, так и с файлами

Вы должны обработать случай ошибки в .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;
});

HTTP больше не допускается. Пожалуйста, используйте HTTPS

Начиная с Android API 28 и iOS 9, эти платформы по умолчанию отключают небезопасные HTTP-соединения.

Для Android добавьте android: networkSecurityConfig = "@ xml / network_security_config" в тег приложения в AndroidManifest.xml, например:

    
    
        
            ...
        
    

содержимое файла network_security_config.xml:




    
        
        
    





Для меня ... У меня уже есть https ... и проблема исчезла, как только я добавил 'Content-type': 'application / json' в заголовки

headers: {
  Authorization: token,
  'Content-type': 'application/json',
  /** rest of headers... */
}

Платформа: Android

У меня такая же проблема на Android 9 из-за «http», и проблема решена простым добавлением android: usesCleartextTraffic = «true» в AndroidManifest.xml





 .......

Не рекомендуется разрешать всем доменам для http. Сделайте исключение только для необходимых доменов.

Источник: Настройка исключений безопасности транспорта приложений в iOS 9 и OSX 10.11

Добавьте в файл info.plist вашего приложения следующее:

NSAppTransportSecurity

  NSExceptionDomains
  
    yourserver.com
    
      
      NSIncludesSubdomains
      
      
      NSTemporaryExceptionAllowsInsecureHTTPLoads
      
      
      NSTemporaryExceptionMinimumTLSVersion
      TLSv1.1
    
  

React Native Docs дает ответ на это.

Apple заблокировала неявную загрузку HTTP-ресурса с открытым текстом. Поэтому нам нужно добавить следующий файл нашего проекта Info.plist (или аналогичный).

 NSAppTransportSecurity 

     NSExceptionDomains 
    
         localhost 
        
             NSTemporaryExceptionAllowsInsecureHTTPLoads 
            <истина />
        
    

React Native Docs -> Интеграция с существующими приложениями -> Протестируйте свою интеграцию -> Добавить исключение безопасности транспорта приложений

Для Android вы могли пропустить добавление разрешения в AndroidManifest.xml Необходимо добавить следующее разрешение.

 

Для устройств Android перейдите в корневую папку вашего проекта и выполните команду:

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

например, adb reverse tcp: 8088 tcp: 8088

Это заставит ваше физическое устройство (например, телефон Android) прослушивать локальный сервер, работающий на вашей машине разработки (то есть на вашем компьютере) по адресу http://localhost: [your_own_server_port].

После этого вы можете напрямую использовать http:localhost: [your_port] / your_api в своем исходном вызове fetch ().

2022 WebDevInsider