Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – React Native fetch Network request failed iOS

I’m trying to send a GET request to the Facebook Graph API using fetch:

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

But I’m getting TypeError: Network request failed(…) in the JavaScript console. This only happens on iOS, it works fine on Android.

As far as I know, iOS on react native allows HTTPS requests by default, so this shouldn’t require any config.

I am able to make a request to https://google.com using fetch, and I am able to view the result of the above request in safari when I print the url var and paste it directly.

Don’t seem to be able to find anything similar, but sorry if this is a duplicate.

Tags:

3

Answers


  1. 0

    Maybe, a retry might work:

    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);
        });
    };
  }
    Login or Signup to reply.
  2. 0

    add this to Info.plist

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

    read more here https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

    Login or Signup to reply.
  3. 0

    As far as I know, iOS on react native allows HTTPS requests by default, so this shouldn’t require any config.

    This isn’t quite right. Any old https connection isn’t good enough for App Transport Security, so you might still need to do some configuration. Here’s the docs on what exactly is required to satisfy ATS without config:

    With ATS fully enabled, your app’s HTTP connections must use HTTPS and
    must satisfy the following security requirements:

    The server certificate must meet at least one of the following trust
    requirements: Issued by a certificate authority (CA) whose root
    certificate is incorporated into the operating system Issued by a
    trusted root CA and installed by the user or a system administrator
    The negotiated Transport Layer Security version must be TLS 1.2 The
    negotiated TLS connection cipher suite must support forward secrecy
    (FS) and be one of the following:
    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 The leaf server certificate must be
    signed with one of the following types of keys: Rivest-Shamir-Adleman
    (RSA) key with a length of at least 2048 bits Elliptic-Curve
    Cryptography (ECC) key with a size of at least 256 bits In addition,
    the leaf server certificate hashing algorithm must be Secure Hash
    Algorithm 2 (SHA-2) with a digest length of at least 256 (that is,
    SHA-256 or greater). If ATS is not enabled, the system still performs
    HTTPS server trust evaluation but you can override it on a
    case-by-case basis, as described in HTTPS Server Trust Evaluation.
    With ATS fully enabled, you cannot override the default HTTPS server
    trust evaluation.

    The requirements listed in this section are current as of this
    document’s publication date, with stricter requirements possible in
    the future. Changes to these requirements will not break app binary
    compatibility.

    I’ve also created a video tutorial on how to make network requests for your react native app: http://codecookbook.co/post/how-to-make-network-requests-in-react-native/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search