Это то, что случается со мной в каждом проекте React Native.

Как я могу сделать запрос к моему локальному API (который работает на localhost)?

Чтобы иметь возможность сделать запрос на локальный компьютер, вам нужно сделать две вещи.

Во-первых, вы должны использовать IP-адрес вашего компьютера в качестве базового URL-адреса для запроса.

Чтобы узнать свой IP-адрес, просто введите эту команду на консоли и найдите inet, который выглядит как 192.168.1.200.

ifconfig | grep inet
---
inet 192.168.1.200 netmask ...

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

Android

Одна из проблем может быть связана с CLEARTEXT HTTP, который защищает приложения от случайного использования трафика открытого текста.

Начиная с Android 9 (уровень API 28), поддержка открытого текста по умолчанию отключена.

* от Android Developers

Это означает, что Android может делать запросы только к источникам HTTPS. Поэтому нам нужно разрешить нашему приложению использовать источники HTTP.

В файл AndroidManifest.xml нам нужно добавить следующие строки:

<manifest ...>
  <uses-permission android:name="android.permission.INTERNET" />
  <application
    android:name=".MainApplication"
    android:usesCleartextTraffic="true"
    android:networkSecurityConfig="@xml/network_security_config"
  ...>
    <activity android:name=".MainActivity" ...>
      ...
    </activity>
  </application>
</manifest>

Это позволит нашему приложению подключаться к КАЖДОМУ источнику HTTP. Но мы хотим разрешить только IP-адрес вашего компьютера. Для этого нам нужно создать файл network_security_config.xml в папке main / res / xml.

<?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">192.168.1.200</domain>
    <base-config cleartextTrafficPermitted="true"/>
  </domain-config>
</network-security-config>

Этот файл ограничивает домены HTTP, с которыми может взаимодействовать наше приложение. IP 10.0.2.2 - это псевдоним эмулятора для 127.0.0.1,, а 192.168.1.200 - IP-адрес нашей машины.

После этого нам нужно установить URL-адрес домена на эмуляторе Android. Итак, откройте Настройки разработчика, нажав CMD + M, а затем нажмите Хост и порт сервера отладки для устройства. В этом модальном окне мы добавляем IP-адрес нашего компьютера 192.168.1.200.

iOS

На стороне iOS у нас будет та же проблема, нам нужно разрешить нашему приложению выполнять запросы к источникам HTTP.

По умолчанию iOS блокирует любой запрос, не зашифрованный с использованием SSL. Если вам нужно выполнить выборку с открытого текста URL-адреса (который начинается с http), вам сначала нужно добавить исключение безопасности транспорта приложений. Если вы заранее знаете, к каким доменам вам потребуется доступ, безопаснее добавлять исключения только для этих доменов; если домены неизвестны до времени выполнения, вы можете полностью отключить ATS. Однако обратите внимание, что с января 2017 года обзор Apple App Store потребует разумного обоснования для отключения ATS. Дополнительную информацию см. В документации Apple.

* из React Native

Для этого нам нужно будет обновить наш файл Info.plist и добавить ключ NSAppTransportSecurity.

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

В iOS нам не нужно определять IP-адрес нашей машины, потому что он преобразует в него localhost.

После этого все, что нам нужно сделать, это переустановить наше приложение на эмуляторе, и все готово, теперь вы можете делать запросы к своему локальному API.

Примечание. Это следует использовать только в локальной среде разработки, не передавайте это в рабочее приложение.

Рекомендуемые ссылки



anunes9 - Обзор
Закрыть Зарегистрируйтесь в своем профиле на GitHub, лучшем месте для размещения кода, управления проектами и создания программного обеспечения… github.com



Я разработчик программного обеспечения из Португалии, в настоящее время работаю в Runtime Revolution как интерфейсный и мобильный разработчик.



Runtime Revolution
Работа офшорной командой в американской компании из Лиссабона В феврале 2016 года я начал новую жизнь. Я… www.runtime-revolution.com