React Native fetch()网络请求失败

Question

当我使用react-native init(RN版本0.29.1)创建一个全新的项目并将渲染方法中的提取放到公共Facebook演示电影API时,它会抛出一个Network Request Failed.有一个非常无用的堆栈跟踪,我无法在chrome控制台中调试网络请求.这是我发送的提取:

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

Answer 1

这里的问题是iOS默认情况下不允许HTTP请求,只允许HTTPS.如果要启用HTTP请求,请将此添加到info.plist:

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

Answer 2

不建议允许http的所有域.仅针对必要的域进行例外处理.

来源:在iOS 9和OSX 10.11中配置App Transport Security例外

将以下内容添加到应用的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>

Answer 3

由于“http”，我在 Android 9 上遇到了同样的问题，只需在 AndroidManifest.xml 中添加android:usesCleartextTraffic="true" 即可解决问题

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

Answer 4

我用localhost的是地址,这显然是错的.在用服务器的IP地址替换它之后(在模拟器所在的网络中),它完美地工作.

编辑

在Android Emulator中,开发机器的地址是10.0.2.2.这里有更多解释

对于Genymotion,地址是10.0.3.2.更多信息在这里

Answer 5

如果您使用 localhost 只需更改它：

从http://localhost:3030 到 ：http://10.0.2.2:3030

Answer 6

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 - >与现有应用程序集成 - >测试集成 - >添加App Transport Security异常

Answer 7

问题可能出在服务器配置中.

Android 7.0有一个错误在这里描述.Vicky Chijwani提出的解决方法:

配置服务器以使用椭圆曲线prime256v1.例如,在Nginx 1.10中,您可以通过设置ssl_ecdh_curve prime256v1来完成此操作;

Answer 8

对我们来说,这是因为我们上传了一个文件而RN filePicker没有给出正确的mime类型.它只是给了我们'形象'作为类型.我们需要将其更改为"image/jpg"以使获取工作正常.

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

Answer 9

对于安卓用户：

1. 将localhosts替换为 Lan IP 地址，因为当您在 Android 设备上运行项目时，localhost 指向的是 Android 设备，而不是您的计算机，例如：更改http://localost为http://192.168.1.123

2. 如果您的请求 URL 是 HTTPS 并且您的 Android 设备在代理下，假设您已在您的 Android 设备中安装了用户添加的 CA（如 burp 套件的 CA 或 Charles 的 CA），请确保您的 Android 版本低于Nougat(7.0)，因为：Android Nougat 中可信证书颁发机构的更改
   

   用户添加的 CA
   保护所有应用程序数据是 Android 应用程序沙箱的一个关键目标。Android Nougat 改变了应用程序与用户和管理员提供的 CA 交互的方式。默认情况下，以 API 级别 24 为目标的应用程序将（按设计）不接受此类 CA，除非应用程序明确选择加入。此默认安全设置减少了应用程序攻击面并鼓励一致处理网络和基于文件的应用程序数据。

Answer 10

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

Answer 11

我在Android上遇到了同样的问题，但设法找到了解决方案。由于默认情况下API级别为28，因此Android禁止明文流量（非https请求）。但是，react-native将网络安全配置添加到调试版本（android/app/src/debug/res/xml/react_native_config.xml），该版本定义了某些域（本地主机和AVD / Genymotion的主机IP），可以在开发模式下不使用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>

Answer 12

我在 Android Emulator 上遇到了同样的问题，我尝试使用有效证书访问外部 HTTPS URL。但是在 react-native 中获取那个 URL 失败了

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

1）为了找出日志中的确切错误，我首先在应用程序上使用 Cmd + M 启用了“远程调试 JS”

2）报告的错误是

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

3) 我使用这种方法添加了 URL 的有效证书 -> STEP 2

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

此证书被添加到用户选项卡。

4）在android:networkSecurityConfigAndroidManifest.xml中添加attribute属性

添加网络安全配置文件 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>

这应该有效，并为您提供预期的响应。

Answer 13

对于Android，您可能错过了在AndroidManifest.xml中添加权限，需要添加以下权限。

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

Answer 14

我有类似的问题。就我而言，对本地主机的请求正在工作，但突然停止了。事实证明，问题是我关闭了 Android 手机上的 WiFi。