CODEWITHSUNDEEP
iosreact-nativeios-simulatoraxios
Arif
Arif

Reputation: 6488

react native axios request not working in IOS simulator

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 :

enter image description here

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

In my browser debug console it shows :

enter image description here

and Mac terminal it shows :

enter image description here

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

My platform:

Upvotes: 5

Views: 6623

Answers (5)

Manil Malla
Manil Malla

Reputation: 243

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

Upvotes: 0

Nabeel Ahmed
Nabeel Ahmed

Reputation: 1

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

Upvotes: 0

Max Kim
Max Kim

Reputation: 102

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>

Upvotes: 0

usergio2
usergio2

Reputation: 469

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>

Upvotes: 0

Deepak
Deepak

Reputation: 734

Update your Info.plist with :

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

Upvotes: 1

Related Questions