React-native Axios is working in iOS but not calling in Android

Question

I can't seem to get the following Axios call to work on Android. It's not hitting the server and showing the error : [Error: Network Error]. The same code works on iOS. Do I have to do something special to enable network requests for Android on React Native?

 var url = 'https://***.****.com/api/list';
 axios.get(url, 
           { headers: {'Content-Type': 'application/json'}}
          ).then((response) => {
               console.log("response = ",response.data)
          })
          .catch((error) => {
              console.log("error = ", error)
          });

I got this error in console :

error = >  Error: Network Error
    at createError (index.bundle?platfor…minify=false:117949)
    at XMLHttpRequest.handleError (index.bundle?platfor…minify=false:117857)
    at XMLHttpRequest.dispatchEvent (index.bundle?platfor…&minify=false:32349)
    at XMLHttpRequest.setReadyState (index.bundle?platfor…&minify=false:31433)
    at XMLHttpRequest.__didCompleteResponse (index.bundle?platfor…&minify=false:31260)
    at index.bundle?platfor…&minify=false:31370
    at RCTDeviceEventEmitter.emit (index.bundle?platfor…e&minify=false:5652)
    at MessageQueue.__callFunction (index.bundle?platfor…e&minify=false:5080)
    at index.bundle?platfor…e&minify=false:4793
    at MessageQueue.__guard (index.bundle?platfor…e&minify=false:5034)

Answer 1

Both iOS and Android have worked for me in the past. A basic skeleton I use is first initiating an axios object with a helper file:

// test_api.js
import axios from 'axios';

export default axios.create({
  baseURL: 'https://***.****.com/api/list',
  headers: {'Content-Type': 'application/json'}
});

...then in the file pulling data:

// app.js
import test_api from './test_api';

const request = async () => {
  try {
    const response = await test_api.get('/');
    console.log("response = ", response.data)
  } catch (error) {
    console.log("error = ", error)
  };

Hope this helps.

Answer 2

it could be your error is like this issue: https://stackoverflow.com/a/16302527/7714108

You need to get on deeper in your Error object, if you get

javax.net.ssl.SSLHandshakeException:
java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

your error is about misconfigured server.

I have this problem on Android 6.0 - API 23 (Marsmallow) and earlier. I don't know why happen only to me from those api and earlier. I am using Expo sdk 35, and I tried with axios, fetch and XMLHttpRequest, and the error always is pretty similar "Network Error". But apart of that, for debugging I am using React Native Debugger, then my curiosity is about why when I enable Network Inspect, this error is gone.

Answer 3

Don't use Axios I had the same issue but reverse it wasn't fetching the info on Ios, I went back and rewrote all of my networking functions using fetch and it worked perfectly for both save yourself the headache and just use fetch.

Answer 4

Please don't use "axios" instead of this use "fetch". it will work for both iOS and android here is the example code for fetch data.

  Test = async ()=>
    {
      try
      {
     fetch(
          'your url', 
          {
          method: 'POST',
           headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
          body: JSON.stringify({
             firstParam: 'yourValue',
        secondParam: 'yourOtherValue',

          })
        }).then(response => {
          const statusCode = response.status;
          const data = response.json();
          return Promise.all([statusCode, data]);
        })
        .then((res) => {
          if (res[0] == 200 && res[2].request_results.result_header.code == 100)
          {

          }
    }
        }).catch((error) =>
          {
            console.error(error);
          }
        );
        }
      }
      catch (e)
      {

      }

      };

you will get your data in "res" and can extract by using for-loop or something else logic that you want to apply.