axios: React native IOS Network Error

Describe the bug

While making any post request using Axios package. I am getting a Network error. While the same API seems to be working perfectly fine with Android devices. It is not an issue with the API.

To Reproduce

Axios post request throws a network error message. If I make the call again inside the catch block then it works fine.

axios
      .post(
        base_url + 'generatePaymentIntent',
        {
          // unit_id: 1,
          token: obj,
          order_type: 'ORD',
          order_data: {
            order_type: order_type,
            apt_id: apt_id,
          },
        },
        Loginheader,
      )
        .then(item => {
        this.setState({
          loading: false,
        });
        console.log('--------generate intent----------');
          console.log(item);
        if (item.data.code === 200) {
          const {price} = item.data.data.order_data;
          

          this.displayPaymentModal(
            'Confirm Payment',
            `Final Price: $${price}`,
            this.props.navigation,
            item.data.code,
            'Make Payment',
            item.data.data,
          );
        }
      })
      .catch(e => {
        this.setState({
          loading: false,
        });
        console.log('--------catch generate intent----------');
        // console.log(e.response);
        // const {message, code} = e.response;
        // this.retryPopup(
        //   `Error getting payment Intent`,
        //   message,
        //   '',
        //   code,
        //   'onetime',
        // );
        console.log(e.response);

        console.log(JSON.stringify(e));

        if (e.message === 'Network Error') {
          // this.makeOneTimePayment(order_type, apt_id);
          this.retryPopup(
              `Error getting payment Intent`,
              'RETRY',
              '',
              '400',
              'onetime',
            );
        }
      });

Expected behavior

It shouldn’t through network error. What should be done to fix this behavior specifically for iOS devices/simulators.

Environment

Axios Version [e.g. 0.19.2]
Additional Library Versions [e.g. React 16.9.0, React Native 0.62.2]

Additional context/Screenshots

N/A

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 16
Comments: 71 (11 by maintainers)

Most upvoted comments

I had the same issue when doing a GET request. This was my api call that was failing on iOS devices

await axios(url, {
  method: "get",
  headers: {
    'Content-type': 'Application/json',
    Accept: 'Application/json',
    Authorization: jwt,
  },
  data: {},
})

I fixed it by changing data: {} to data: undefined. This fixed my issue on iOS. It always worked on android for me.

+112

bruuuuuuuce on Nov 25, 2020

Add this to your Info.plist like this:

<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
		<key>NSExceptionDomains</key>
		<dict>
			<key>localhost</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
		</dict>
	</dict>

+55

exzos28 on Apr 17, 2021

I was able to identify a problem on my attempts, we had something being passed into body for a get and was having a hard time tracking it down because the error stated a network error. Android was fine, IOS not so much. After removing the body, we had no issues. I would suggest checking to ensure your call is structured properly. Personally I would qualify this as a bug in my case, and assume your case is similar.

To replicate: add data to the data field of params.
Expected meaningful error about invalid parameter structure **Result ** network error

+42

sacridias on Sep 11, 2020

Check if the url has http instead of https. In that case not having

<key>NSAllowsArbitraryLoads</key>

in info.plist made this network error for me

+22

geobako on Mar 23, 2021

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

+19

github-actions[bot] on Nov 16, 2020

I had the same issue when doing a GET request. This was my api call that was failing on iOS devices
await axios(url, {
  method: "get",
  headers: {
    'Content-type': 'Application/json',
    Accept: 'Application/json',
    Authorization: jwt,
  },
  data: {},
})
I fixed it by changing data: {} to data: undefined. This fixed my issue on iOS. It always worked on android for me.

no still not working in ios still [Error: Network Error]

+16

abdulrehmansiddiqui on Feb 19, 2021

👋 Still an issue 🤷‍♂️

+12

dscdac on Jul 8, 2021

Same problem here, but intermittent.

+11

dscdac on Sep 9, 2020

Try to put / at the end of api. In my case when simulator is not connected with debugger, it was not passing request header to the call.

Nitish33 on Jul 9, 2021

Each time I make changes i do a rebuild, still no joy 😦

drizham on Apr 19, 2021

We are facing same issue with Android and AVD Emulator. All API calls are giving Network Error. We are using our Dev Server for connectivity for APIs. The Dev Server URL looks like: https://dev.domain.com React: 0.64.0 React Native: 17.0.1 NPM/NPX: 6.14.15 Node: 12.22.7 Android 11 (SDK 30) Device: Pixel 5

For iOS all API calls are working fine.

eemkays on Oct 23, 2021

here is mine, still not working: <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>

drizham on Apr 17, 2021

I am having the same issue suddenly in iOS but with a GET request. The request works fine in Android and Postman… tried with axios 19 and 20.

MOwais on Oct 9, 2020

Hello everyone, may be that can help to you. Go to ‘Signing & Capabilities’ tab in Xcode, and add your API domain to “App Transport Security Exception” -> Exception Domains. There will be localhost already.

Also this is just like a gui for your info.plist, so it adds some lines to it, you can check them if you want.

NekkiNeks on Mar 4, 2022

It helped me, add this to your Info.plist like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <!--others key-->
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>insecure-domain1.example.com</key>
            <dict>
		<key>NSIncludesSubdomains</key>
		<true/>
		<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
		<true/>
		<key>NSTemporaryExceptionMinimumTLSVersion</key>
		<string>TLSv1.1</string>
	    </dict>
            <key>insecure-domain2.example.com</key>
            <dict>
		<key>NSIncludesSubdomains</key>
		<true/>
		<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
		<true/>
		<key>NSTemporaryExceptionMinimumTLSVersion</key>
		<string>TLSv1.1</string>
	    </dict>
        </dict>
    </dict>
    <!--others key-->
</dict>
</plist>

bachngocnhat on Jan 4, 2022

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

nabeelahmdrana on May 28, 2021

I had the same issue when doing a GET request. This was my api call that was failing on iOS devices
await axios(url, {
  method: "get",
  headers: {
    'Content-type': 'Application/json',
    Accept: 'Application/json',
    Authorization: jwt,
  },
  data: {},
})
I fixed it by changing data: {} to data: undefined. This fixed my issue on iOS. It always worked on android for me.

worked perfectly for me. Not sure why this fixed the problem.

gsingh0 on Dec 18, 2020

I was facing what seems to be the same issue (“Network Error” upon making Axios POST requests, but only when on iOS). The issue turned out to be my lack of a trailing slash (thank you, @Nitish33 !). (I’m using Vue / Ionic rather than React / React Native, but it seems that may be irrelevant.)

danyul on Feb 13, 2022

Hello! 👋

Thanks.

github-actions[bot] on Aug 16, 2021

I am facing the same issue.

Request works when using HTTPie
I can access the swagger page on the simulator by entering the address (https://localhost:7297/swagger/index.html) on Safari
But when I make the request using axios, inside the React Native App, I get a Network Error

TisaneFruitRouge on Nov 27, 2023

Hello! 👋

Thanks.

github-actions[bot] on Nov 29, 2021

@jasonsaayman please check #3278 for a reproducible example. It seems like the issue happens with any requests made using axios in iOS 11 & 12, it happens specifically for POST/PUT/DELETE requests because of CORS (as GET doesn’t require CORS).

AlissonRS on May 17, 2021

Still having the issue. Any resolution for this yet. Only happens in IOS.

hm-lijojohn on Nov 29, 2020

I am having the same issue suddenly in iOS but with a GET request. The request works fine in Android and Postman… tried with axios 19 and 20.

Make sure you are not posting info that you should, such as a body/data block. That was the issue when we had it with iOS.

sacridias on Oct 13, 2020

@swapnilshah09 is stating clearly:

While making any post …

But @scook-tanviit is referring to a completely different problem (sending a body in a get request) 😞

dscdac on Sep 11, 2020