React Native fetch Network 请求失败 iOS答案

【问题标题】：React Native fetch Network request failed iOSReact Native fetch Network 请求失败 iOS
【发布时间】：2016-08-25 10:26:54
【问题描述】：

我正在尝试使用 fetch 向 Facebook Graph API 发送 GET 请求：

var url = "https://graph.facebook.com/v2.7/"
+FACEBOOK_APP_ID
+"?fields=context"
+"{friends_using_app{id,name,picture.type(normal)}}"
+"&access_token="+_this.props.user.facebook_access_token;

fetch(url)
.then((response) => response.json())
.then((responseJson) => {
  console.log(responseJson);
})
.catch(function(error) {
  console.log(error);
});

但我在 JavaScript 控制台中收到了TypeError: Network request failed(…)。 这只发生在 iOS 上，它在 Android 上运行良好。

据我所知，iOS on react native 默认允许 HTTPS 请求，所以这不需要任何配置。

我可以使用fetch 向https://google.com 发出请求，当我打印url var 并直接粘贴时，我可以在Safari 中查看上述请求的结果。

似乎找不到类似的东西，但如果这是重复的，请见谅。

【问题讨论】：

我在模拟器中获取类似的错误。如果我重做提取，它似乎工作。不确定 0.31 版本中的 fetch 是否有问题。
重做是什么意思？
我的意思是重试获取。
您能提供一个代码示例吗？我尝试在.catch() 方法中重试请求，但没有成功

标签： ios facebook post react-native

【解决方案1】：

据我所知，iOS on react native 默认允许 HTTPS 请求，所以这不需要任何配置。

这不太对。任何旧的 https 连接都不足以保证应用传输安全，因此您可能仍需要进行一些配置。下面是the docs，关于在没有配置的情况下满足 ATS 的确切要求：

在完全启用 ATS 的情况下，您应用的 HTTP 连接必须使用 HTTPS 和必须满足以下安全要求：

服务器证书必须至少满足以下信任之一要求：由其根证书颁发机构 (CA) 颁发证书被整合到操作系统中受信任的根 CA 并由用户或系统管理员安装协商的传输层安全版本必须是 TLS 1.2 协商的 TLS 连接密码套件必须支持前向保密 (FS) 并且是以下之一： TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384 TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256 TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA384 TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA256 TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384 TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384 TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA256 TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA 叶服务器证书必须是使用以下类型的密钥之一签名：Rivest-Shamir-Adleman (RSA) 密钥长度至少为 2048 位 Elliptic-Curve 大小至少为 256 位的加密 (ECC) 密钥此外，叶服务器证书散列算法必须是安全散列摘要长度至少为 256 的算法 2 (SHA-2)（即， SHA-256 或更高版本）。如果未启用 ATS，系统仍会执行 HTTPS 服务器信任评估，但您可以在逐个案例，如 HTTPS 服务器信任评估中所述。完全启用 ATS 后，您无法覆盖默认 HTTPS 服务器信任评估。

本节中列出的要求是截至目前的最新要求文件的发布日期，可能有更严格的要求未来。对这些要求的更改不会破坏应用程序二进制文件兼容性。

我还创建了一个视频教程，介绍如何为您的 React Native 应用程序发出网络请求：http://codecookbook.co/post/how-to-make-network-requests-in-react-native/

【讨论】：

【解决方案2】：

也许，重试可能会奏效：

static sendCard(card, account, retries) {
    return (dispatch, getStore) => {          
      if (retries && retries > 1) {
        return;
      }

      fetch(apiUrls.sendCardUrl, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Api-Key': account.token,
          },
          body: JSON.stringify({
            card
          })
        })
        .then(response => {
          // do something
        })
        .catch(err => {
          // retry again!
          retries = retries || 0;
          retries++;
          setTimeout(() => {
            CardActions.sendCard(card, account, retries);
          }, 1000);
        });
    };
  }

【讨论】：

【解决方案3】：

将此添加到 Info.plist

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

【讨论】：

我试过了，它没有任何效果，即使在重新启动/重置模拟器和我的电脑之后。