react native axios request not working in IOS simulator

Question

I am trying to getting data from API using axios.

This is my code that makes a get request :

export const loadBloodGroups = () => {
    return (dispatch) => {

        dispatch({ type: LOADING_BLOOD });

        const url = `http://www.example.org/api/bloodgroup/getusersbloodgroup`;
        axios.get(url)
        .then(response => loadingSuccess(dispatch, response))
        .catch(error => loadingFail(dispatch, error));
    };
};

const loadingFail = (dispatch, error) => {
    console.log(error);
    dispatch({ 
        type: LOADING_BLOOD_FAIL,
        payload: error
    });
};

const loadingSuccess = (dispatch, response) => {
    dispatch({
        type: LOADING_BLOOD_SUCCESS, 
        payload: response
    });
};

info.plist setup for http :

It works fine in android emulator, but IOS simulator is not working.

In my browser debug console it shows :

and Mac terminal it shows :

Can anybody tell me, where I made mistake ? or should I need to do any other configuration for IOS?

My platform:

OS: Mac 10.13
node: 10.7
npm: 6.3.0
react: 16.4.1
react-native: 0.55

Try and use the console to check the error, change `.catch(error => loadingFail(dispatch, error));` to `.catch(error => { console.log(error); loadingFail(dispatch, error) });` Please paste the output of the console message. — Dan, Aug 08 '18 at 09:31
Can you try to remove the catch() part and add the error handling inside the then() part? Like so .then(response=> {}, error=>{}). This will not solve your problem but it might help you with debugging it. Have a look at this tweet to understand why I'm suggesting this https://twitter.com/dan_abramov/status/770914221638942720?lang=en — needsleep, Aug 08 '18 at 09:50
I tested both of your suggested way, but I got same [Network error](https://i.stack.imgur.com/KQIEl.png) — Arif, Aug 08 '18 at 17:47
@Arif did you find any solution? I have the same problem. I can access the same http url from the simulator's Safari, but not from my app. — Yossi, Jan 23 '19 at 10:43
@Yossi Instead of changing the configuration for http. I made my service https. Now it works fine. — Arif, Jan 23 '19 at 16:10
@Arif Thanks for responding! I assume that on the smartphone http worked fine, right? (I mean, when you worked with Xcode, using a real device instead of the simulator, not with the .ipa) — Yossi, Jan 23 '19 at 16:57

score 1 · Answer 1 · answered Aug 08 '18 at 06:53

1

Update your Info.plist with :

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

answered Aug 08 '18 at 06:53

Deepak

724
4
13

I have tried it already from [here](https://stackoverflow.com/a/38427829/3835843). But it also gives me same error. – Arif Aug 08 '18 at 06:57
Then something is wrong with your network, try changing it or try running your app in device. – Deepak Aug 08 '18 at 07:19

score 0 · Answer 2 · answered Aug 09 '18 at 04:27

0

In the attempt to change the ATS key you removed the one for react native your plist value for NSAppTransportSecurity

<key>NSAppTransportSecurity</key>
    <dict>
        <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        <key>bloodconnector.org</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
</dict>

answered Aug 09 '18 at 04:27

usergio2

469
3
12

I added `localhost` and update info.plist screenshot in my question. But it doesn't solved. – Arif Aug 09 '18 at 19:09
@Arif do you still face this issue? The error in your terminal often caused by your simulator unable to make connection to your packaged. Sometimes restarting the packager and simulator helps. – usergio2 Aug 15 '18 at 15:46
Yes. still i am facing this issue. I restart simulator, but not working. OK, i will check it by restarting package. – Arif Aug 16 '18 at 07:46

score 0 · Answer 3 · answered Apr 22 '20 at 12:11

Just edit info.plist: remove "NSExceptionMinimumTLSVersion" then add "NSExceptionRequiresForwardSecrecy" with "false" value.

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
            <dict>
                <key>specificDomain.com</key>
                <dict>
                    <key>NSIncludesSubdomains</key>
                    <true/>
                    <key>NSExceptionAllowsInsecureHTTPLoads</key>
                    <true/>
                    <key>NSExceptionRequiresForwardSecrecy</key>
                    <false/>
                </dict>
            </dict>
        <key>NSAllowsLocalNetworking</key>
        <true/>
    </dict>

score 0 · Answer 4 · edited May 30 '21 at 12:00

While searching for the solution of React native IOS Network Error, I have found the solution: when working on localhost path for iOS and android create issues if you are using localhost for android give this as your path : 'http://10.0.2.2:3000' if you are using localhost for iOS give this as your path : http://localhost:3000

following is the code:

import {Platform} from 'react-native'
import axios from 'axios';
var baseURL = null;

Platform.OS === 'android'? baseURL = 'http://10.0.2.2:3000' : baseURL= 'http://localhost:3000'

export const getNotifications = () =>
    axios.get(`${baseURL}/notifications`, {
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
    });

score 0 · Answer 5 · answered Jan 11 '23 at 11:26

For me the issue was that my request used HTTP instead of HTTPS and apparently iOS does not allow HTTP requests by default. So updating the '~/ios/ App_Name /info.plist' to include the following enables HTTP requests.

<!-- ...Other keys -->
<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key> <!-- Add me to enable HTTP requests.  -->
        <true/> <!-- Add me to enable HTTP requests.  -->
    </dict>
<!-- ...Other keys -->

react native axios request not working in IOS simulator

5 Answers5