Cannot send request with React Native and Axios

Question

I've read dozens of answers, and I can't seem to figure this out:

• The request works fine in iOS, but it does not work in Android
• I am using React Native 0.57.5 and axios 0.18.0
• I put some logging via

axios.interceptors.request.use(request => {
  console.log('Starting Request', request)
  return request
})

axios.interceptors.response.use(response => {
  console.log('Response:', response)
  return response
})

As it can be seen, the request seems fine. And it is not towards localhost but to an actual, running server (I redacted some internal header keys and the full URLs)

• Also put a log statement to catch of where I make my axios request:

axios.request(config)
      .then((axiosResponse) => {
        console.log('GOOD RESPONSE ', axiosResponse)

        // some logic 
      })
      .catch((error) => {
        console.log('axiosResponse ERROR', error)
        // some other logic
      })

And this is what I see in the chrome debugger console:

axiosResponse ERROR Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:580)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:394)
    at XMLHttpRequest.js:507
    at RCTDeviceEventEmitter.emit (EventEmitter.js:190)
    at MessageQueue.__callFunction (MessageQueue.js:349)
    at MessageQueue.js:106
    at MessageQueue.__guard (MessageQueue.js:297)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:105)
    at debuggerWorker.js:72

This is part of my upgrade from React Native 0.55.0 to 0.57.5, so this axios stuff was working normally before.

Any ideas?

Answer 1

For what you said I think it must be that you didn't ask for internet permissions, if that's the case you need to edit in your android project inside react your manifest file it must be in $your_project_root_directory/android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package"
    android:versionCode="1"
    android:versionName="1.0">
...
    <uses-permission android:name="android.permission.INTERNET" />
...
</manifest>

Other thing that could be is that if you are using http connection. try the following

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">yourinsecureserver.com</domain>
    </domain-config>
</network-security-config>

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <application android:networkSecurityConfig="@xml/network_security_config"
                    ... >
        ...
    </application>
</manifest>

https://android-developers.googleblog.com/2018/04/protecting-users-with-tls-by-default-in.html

Answer 2

To solve this problem you need add the API domain in your react_native_config.xml file like picture bellow:

Print on Android Studio

<?xml version="1.0" encoding="utf-8"?>
 <network-security-config>
  <domain-config cleartextTrafficPermitted="true">
   <domain includeSubdomains="false">localhost</domain>
   <domain includeSubdomains="false">10.0.2.2</domain>
   <domain includeSubdomains="false">10.0.3.2</domain>
   <domain includeSubdomains="false">192.168.0.9</domain>
 </domain-config>
</network-security-config>