태그 보관물: react-native

react-native

네이티브 fetch () 네트워크 요청 실패 init(RN 버전 0.29.1)을 사용하여 새로운

react-native init(RN 버전 0.29.1)을 사용하여 새로운 프로젝트를 만들고 렌더 메소드에 공개 페이스 북 데모 영화 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 filePicker가 올바른 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>

네이티브 문서 반응-> 기존 앱과 통합-> 통합 테스트-> 앱 전송 보안 추가 예외

답변

서버 구성에 문제가있을 수 있습니다.

Android 7.0에는 여기에 설명 된 버그가 있습니다 . Vicky Chijwani가 제안한 해결책 :

타원 곡선 프라임 256v1을 사용하도록 서버를 구성하십시오. 예를 들어 Nginx 1.10에서는 ssl_ecdh_curve prime256v1;

답변

안드로이드에서도 같은 문제가 발생했지만 해결책을 찾았습니다. Android는 API 레벨 28부터 기본적으로 일반 텍스트 트래픽 (https 이외의 요청)을 차단합니다. 그러나 react-native는 디버그 모드 ( android/app/src/debug/res/xml/react_native_config.xml)에 network-security-config를 추가하여 일부 도메인 (localhost 및 AVD / Genymotion의 호스트 IP)을 정의 하는 디버그 버전 ( )에 추가합니다.이 모드는 dev 모드에서 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>