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

Could you add more details about your environment setup, like: Android or IOS, Simulator or Physical device — Wael Zoaiter, Apr 12 '21 at 03:36
@WaelZoaiter sorry about that, I've added the project environment details to the post. I am running this on an Android Emulator using AVD. — Sankomil, Apr 12 '21 at 03:42
I think you are missing this: https://stackoverflow.com/questions/5528850/how-do-you-connect-localhost-in-the-android-emulator — revobtz, Apr 12 '21 at 03:47
@revobtz thanks, that got rid of the network error, but now it returns a large HTML page along with a 400 error. — Sankomil, Apr 12 '21 at 03:57
I can't help you without further information, at least it's seems you reach out the server. :) — revobtz, Apr 12 '21 at 04:00
@revobtz of course. I think I might create a new question if I can't figure it out on my own. Thanks for your help! — Sankomil, Apr 12 '21 at 04:05
@revobtz I was able to solve it! I just had to add 10.0.2.2 to the allowed_hosts in Django. — Sankomil, Apr 12 '21 at 04:22

score 1 · Answer 1 · answered Apr 12 '21 at 03:55

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/')

answered Apr 12 '21 at 03:55

Wael Zoaiter

686
1
7
21

Hey, thanks for your response. I was able to follow revobtz's suggestion and used 10.0.2.2 to connect to the device as using my IPv4 address got no response. However it is giving a 400 error code. – Sankomil Apr 12 '21 at 04:00
Great, 400 is most likely validation error from the API – Wael Zoaiter Apr 12 '21 at 04:07
thanks! I managed to figure it out. Just had to add 10.0.2.2 to allowed_bosts on Django. Thank you for all your help! – Sankomil Apr 12 '21 at 04:23

Sankomil · Answer 2 · 2021-04-13T02:22:37.957

0

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.

edited Apr 13 '21 at 02:22

answered Apr 12 '21 at 04:41

Sankomil

55
1
7

Please accept you own answer and give some credit with the answer or resource that helped you. I can repost my comment as an answer and you accept it? – revobtz Apr 12 '21 at 15:20
1

@revobtz sorry about that, credited you in the edit. Stackoverflow won't let me accept my answer until 2 days have passed. If you can repost your comment as an answer, then I will definitely accept it and close the question. Thanks! – Sankomil Apr 13 '21 at 02:23
I added the answer! – revobtz Apr 13 '21 at 15:55

score 0 · Accepted Answer · answered Apr 13 '21 at 15:55

0

Use 10.0.2.2 for default AVD and 10.0.3.2 for Genymotion

answered Apr 13 '21 at 15:55

revobtz

606
10
12

Network error when running Axios with React native

3 Answers3