Question

我正在尝试使用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中查看上述请求的结果直接

似乎找不到类似的东西，但如果这是重复的话，请后悔。

Answer 1

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

这不太对。任何旧的https连接都不适合App Transport Security，因此您可能仍需要进行一些配置。这里是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   密码（ECC）密钥，大小至少为256位另外，   叶服务器证书哈希算法必须是安全哈希   算法2（SHA-2），摘要长度至少为256（即，   SHA-256或更高版本）。如果未启用ATS，则系统仍会执行   HTTPS服务器信任评估，但您可以在a上覆盖它   具体情况，如HTTPS服务器信任评估中所述。   完全启用ATS后，您无法覆盖默认的HTTPS服务器   信任评估。

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

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

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

Answer 3

将此添加到Info.plist

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

在此处阅读更多内容https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

React Native fetch网络请求失败iOS

3 个答案: