Network error when running Axios with React native

Question

I am trying to link my Django backend with my React Native. Currently I am making a simple GET request to get a JSON object of all the patients in the backend (have only one stored right now if that helps). My call is made like so:

async function AxiosTest() {

axios

      .get('http://127.0.0.1:8000/drugs/patients/')

      .then(function (response) {

console.log('response', response);

      })

      .catch(function (error) {

console.log('error', error.request);

      });

  }

And this is triggered by a button press. However the response I get is:

error {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, 
"_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "application/json, text/plain, 
*/*"}, "_incrementalEvents": false, "_lowerCaseResponseHeaders": {}, "_method": "GET", "_perfKey": 
"network_XMLHttpRequest_http://127.0.0.1:8000/drugs/patients/", "_requestId": null, "_response": "Failed 
to connect to /127.0.0.1:8000", "_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": 
false, "_trackingName": "unknown", "_url": "http://127.0.0.1:8000/drugs/patients/", "readyState": 4, 
"responseHeaders": undefined, "status": 0, "timeout": 0, "upload": {}, "withCredentials": true}

I have the server running, and am able to make the calls to it via the browser and Postman. Could it be because they are both on different ports? Any help is much appreciated. Thanks!

Edit: I am running this on an Android Emulator using AVD. And below are the results of running react-native info :

    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 2.59 GB / 15.83 GB
  Binaries:
    Node: 14.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.6953283
    Visual Studio: Not Found
  Languages:
    Java: javac 15
    Python: 3.8.7
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.1 => 17.0.2
    react-native: 0.63.4 => 0.63.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Answer 1

AVD emulate an actual device so you cannot connect via localhost as the server and emulator are not considered on the same device, can you try point the url to your actual IP address

run ipconfig on CMD and get the ip as shown in the image

and add it to your code, like:

axios.get('http://{Your IP}:8000/drugs/patients/')

Answer 2

if you've found yourself here in the same dilemma I was in, then I hope this helps solve your question. Thanks to revobtz who suggested having a look at this post in their comment, which answers the question for how to link your AVD to Django. Essentially you need to use 10.0.2.2 instead of localhost or anything else as AVD works on a different port altogether. Next you need to go to settings.py of your Django project and add 10.0.2.2 to your ALLOWED_HOSTS .

And that's it, that should let you make GET requests easily.

Answer 3

Use 10.0.2.2 for default AVD and 10.0.3.2 for Genymotion