React Native fetch iOS Network Request Error

Question

I am trying to send a GET request to the Facebook 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 get TypeError: Network request failed(…) in the JavaScript console. This only happens on iOS, it works great on Android.

As far as I know, iOS reacts natively to HTTPS requests by default, so no configuration is required for this.

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

It doesn't seem like you can find anything like that, but sorry if this is a duplicate.

Answer 1

As far as I know, iOS reacts natively to HTTPS requests by default, so no configuration is required for this.

This is not entirely correct. Any old https connection is not enough for application security for applications, so you may need to do some configuration. Here are docs on what exactly is required to satisfy ATS without config:

With full ATS enabled, your HTTP application connections must use HTTPS and must meet the following security requirements:

The server certificate must satisfy at least one of the following methods: requirements: issued by the certification body (CA), the root of which the certificate is included in the operating system. A trusted root CA was issued and installed by the user or system administrator. The contractual version of the transport layer security should be TLS 1.2. consistent set of encryption TLS connections must support the forward secrecy (FS) and 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 sheet server certificate must be signed by one of the following types of keys: Rivst-Shamir-Adleman (RSA) to the length at least 2048 bits Elliptic curve Cryptography (ECC) with a size of at least 256 bits. In addition, the hash algorithm for sheet server certificates must be Secure Hash Algorithm 2 (SHA-2) with a digest length of at least 256 (i.e., SHA-256 or higher). If ATS is not enabled, the system still performs HTTPS server trust verification, but you can override it on a case-by-case basis as described in the HTTPS Server Trust Evaluation. If ATS is fully enabled, you cannot override the default HTTPS server trust.

The requirements listed in this section are current publication dates for documents with more stringent requirements that are possible in the future. Changes to these requirements will not violate application binary compatibility.

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

Answer 2

Please try again:

 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

add this to Info.plist

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

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