'React Native Axios request on iOS returns "Network Error"

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
reactjsreact-nativenetworkinghttpsaxiosjavajava-ioioexceptionjavax.imageio


Solution 1:[1]

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.

Solution 2:[2]

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!

Solution 3:[3]

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/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ece Mac
Solution 3 CHERIF Hani Salah Eddine

Related Questions