React Native Axios request on iOS returns "Network Error"

Question

I created a RN project (without Expo) and setup my API services. I'm using dummyapi.io to get dummy post data, which is a HTTPS request. I keep getting "Network Error" from Axios and when I look into error details I see the following message:

"_response": "The certificate for this server is invalid. You might be connecting to a server that is pretending to be “dummyapi.io” which could put your confidential information at risk."

Everything works fine on Android, so I think this is about Apple's insane security rules.

I've tried adding the following on my Info.plist but no use:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>www.dummyapi.io</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

To further explain my problem, a GET call to "google.com" works, but "jsonplaceholder.typicode.com" does not. I would appreciate any help about this issue, I'm pretty desperate at this point.

React Native Version: 0.66.4
React Version: 17.0.2
Axios Version: 0.24.0

did you get the solution. adding NSAllowsArbitraryLoads NSExceptionDomains not working for me. — Avinash Ajay Pandey, Nov 07 '22 at 11:26
@AvinashAjayPandey Yes, you can check my own answer below. It was a combination of my answer and changing my network. Secure networks can mess things up — Ece Mac, Nov 08 '22 at 12:20

Lukas Schneider · Answer 1 · 2022-01-14T14:43:34.237

2

You're right about IOS's security rules. Add the following to plist.info disables all App Transport Security restrictions and should allow you to connect via HTTP:

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

Otherwise, you will have to generate a root CA certificate, install it on your device.

Here's how to generate the root certificate and use it to generate self-signed certificates: https://www.ibm.com/docs/en/runbook-automation?topic=certificate-generate-root-ca-key
Here's how to install it on an IOS device: https://medium.com/collaborne-engineering/self-signed-certificates-in-ios-apps-ff489bf8b96e

This question is related to: https://stackoverflow.com/a/38427829/17922074.

edited Jan 14 '22 at 14:43

answered Jan 14 '22 at 14:34

Lukas Schneider

106
4

I did, unfortunately it doesn't work... – Ece Mac Jan 14 '22 at 14:36
Then you might have to install the certificate on your device. You'll need a root certificate to do this, here's how to generate one: https://www.ibm.com/docs/en/runbook-automation?topic=certificate-generate-root-ca-key. This is how to install the root certificate on your device: https://medium.com/collaborne-engineering/self-signed-certificates-in-ios-apps-ff489bf8b96e – Lukas Schneider Jan 14 '22 at 14:39
Please let me know if it works so I can adapt my answer accordingly for others facing the same issue. – Lukas Schneider Jan 14 '22 at 14:40
I'll look into it, but what I don't understand is, when I send my repo to an employer and they run the app on their device or a simulator, wouldn't it cause a similar problem since they won't have the certificate I created? – Ece Mac Jan 14 '22 at 14:49
This may depend on many things and I'm not an expert but in general I would say yes. If they're using IOS, their OS should block the connection too. – Lukas Schneider Jan 14 '22 at 14:52

score 2 · Answer 2 · answered May 24 '22 at 15:05

2

to fix this issue follow this steps :

1- go to info.plist.

2- next go to the key

<key>NSAppTransportSecurity</key>

3- inside the <dict></dict> of the key add this code :

 <key>NSAllowsArbitraryLoads</key>
<true/>

answered May 24 '22 at 15:05

CHERIF Hani Salah Eddine

21
4

score 0 · Answer 3 · answered Jan 14 '22 at 23:20

I GOT IT, thanks to this issue! Apparently the app needs to be completely up and running before making any API calls, which resulted in something like this in App.js

import {AppState} from 'react-native';

const App = () => {
  return (
    {AppState.currentState === 'active' && <Navigation />}
  );
};

Hope this helps anyone who comes across a similar problem!

score 0 · Answer 4 · answered Jun 27 '23 at 13:41

0

Erasing the simulator and creating a new one WORKED! (try with a different simulator)

answered Jun 27 '23 at 13:41

Davide Carpini

1,581
17
15

React Native Axios request on iOS returns "Network Error"

4 Answers4