4

I am using expo client on my android device and have setup up a django server at localhost:8000 and i'm trying to access and endpoint using fetch in react native. I have looked at How can I access my localhost from my Android device? How do you connect localhost in the Android emulator? and How to connect to my http://localhost web server from Android Emulator in Eclipse but that did not work.

I also tried using my machine's ip address instead of localhost, but no results. Here is a sample code

componentDidMount(){
    return fetch('http://my-ip-address:8000/restapi/')
      .then((response) => {
        console.log("success")
        response = response.json()
      }).catch(error => {
        console.error(error)
      })
  }

What am I doing wrong here?

csum
  • 1,782
  • 13
  • 15
ann
  • 602
  • 7
  • 13
  • Are you testing on your device or simulator? – Jeff Gu Kang Sep 20 '18 at 02:20
  • Try 127.0.0.1 as your ip address. If that doesn't work try using postman to see if you can communicate. – sbso Sep 20 '18 at 02:24
  • I'm using my mobile device. I tried 127.0.0.1. That didn't work and also I used postman to verify that I'm getting the correct response – ann Sep 20 '18 at 03:19
  • Using an actual device is a bit different. Based on the emulator links you gave, and using 10.0.2.2 I assumed you were using an emulator. Is your phone on the same network. Have you validated you don't have a firewall, or anything blocking incoming connections/port? – sbso Sep 20 '18 at 03:53
  • Just to be clear, "success" is not being printed in the console, correct? And you're using a local network address, and all devices in question are connected to the same network? – csum Sep 20 '18 at 04:16
  • My phone is on the same wifi network. And I check my firewall for blocking connections. I will try and emulator and see if that works – ann Sep 20 '18 at 04:16
  • Can your phone access the same url in a web browser? – csum Sep 20 '18 at 04:27
  • Yes all the devices are on the same wi-fi network. And i'm not able to access the same url via my phone – ann Sep 20 '18 at 04:37
  • If your phone's browser can't access the same url, it may be a django config issue. I'm not familiar with django, but [this may help make the django server accessible on your network](https://stackoverflow.com/questions/2260727/how-to-access-the-local-django-webserver-from-outside-world) – csum Sep 20 '18 at 04:49

3 Answers3

8

This may be an issue with the django configuration. Especially if your phone's web browser is unable to get the expected response as well.

From the Django docs:

Note that the default IP address, 127.0.0.1, is not accessible from other machines
on your network. To make your development server viewable to other machines on the
network, use its own IP address (e.g. 192.168.2.1) or 0.0.0.0 or :: (with IPv6 enabled).

See How to access the local Django webserver from outside world, though the answer also applies on a local network:

python manage.py runserver 0.0.0.0:8000

You can replace 0.0.0.0 with the machine's address if you know it.

Also worth noting in your response handler that response.json() returns a Promise, not JSON. Instead you want:

fetch('http://my-ip-address:8000/restapi/')
  .then(response => response.json())
  .then(responseJson => {
    console.log("success");
    console.log(responseJson);
  })
  .catch(error => {
    console.error(error);
  })
csum
  • 1,782
  • 13
  • 15
1

In addition to csum's answer, please check if the firewall has allowed remote access to your android device (device IP as remote) for the django server. If you've any anti-virus installed and controlling firewall, ensure that it has a rule in its firewall.

Najam
  • 141
  • 1
  • 8
0

Solution

Acording to your code,

  • your django's port : :8080
  • your fetch's target port: :8000

Check again. And I recommend using PostMan when you test your server apis.

Jeff Gu Kang
  • 4,749
  • 2
  • 36
  • 44