Network Error when making GET request to local RestAPI

Question

I'm very new to RestAPIs and also to React(native). But I set up a a very little Rest API. The Rest API seems to return completly valid JSON. I access the API with the url: http://127.*.***.*:7000/profile/api/products/ As you can see I'm on my localhost.

I try to make a GET request with fetch/axios (tried both):

componentWillMount() {
        axios.get("http://127.0.0.1:7000/profile/api/products/")
        .then(response => this.setState({products: response.data}))
        .catch((error) => console.log(error));
    }

But I get a Network Error. Can someone help. I feel a bit lost in the woods since I can't really tell where the error could be.

Error: Network Error
    at createError (C:\Users\Computer\Documents\Apps\charlees\node_modules\axios\lib\core\createError.js:16)
    at XMLHttpRequest.handleError (C:\Users\Computer\Documents\Apps\charlees\node_modules\axios\lib\adapters\xhr.js:88)
    at XMLHttpRequest.dispatchEvent (C:\Users\Computer\Documents\Apps\charlees\node_modules\event-target-shim\lib\event-target.js:172)
    at XMLHttpRequest.setReadyState (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:548)
    at XMLHttpRequest.__didCompleteResponse (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:381)
    at C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:487
    at RCTDeviceEventEmitter.emit (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:181)
    at MessageQueue.__callFunction (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:306)
    at C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108
    at MessageQueue.__guard (C:\Users\Computer\Documents\Apps\charlees\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:269)

https://stackoverflow.com/questions/33704130/react-native-android-fetch-failing-on-connection-to-local-api/43277765#43277765 — Jagjot, Oct 31 '17 at 19:19

score 2 · Answer 1 · answered Oct 31 '17 at 16:35

2

If this is on an emulator try either putting the machine IP like 192.168.1.X or something like that

answered Oct 31 '17 at 16:35

sebastianf182

9,844
3
34
66

hey, yeah - I found this topic on SO: https://stackoverflow.com/questions/5528850/how-to-connect-localhost-in-android-emulator suggesting the same. But it does not quite work for me yet. My IP and also using: `http://10.0.2.2:8000/profile/api/products/ `do not allow me to access the api. – Xen_mar Oct 31 '17 at 16:47
Try changing componentWillMount for ComponentDidMount – sebastianf182 Oct 31 '17 at 16:50
`http://10.0.2.2:8000/profile/api/products/` fails with a http 400 but as you can see - i am making a normal get request and its also working on my browser. But thanks very much for the help! – Xen_mar Oct 31 '17 at 16:50
thanks for that suggesting, but that wont solve it neither. I tried the code on some other very simply api (not a local host) and it worked with no problems. – Xen_mar Oct 31 '17 at 16:53
You said you get error 400. Maybe you are missing a header in the request? Possibly the content-type – sebastianf182 Oct 31 '17 at 16:55

score 0 · Answer 2 · answered Oct 31 '17 at 17:26

Just in case there are more complete beginners out here ready to embarrass themselves on Stackoverflow, here is the solution for everyone who combines react-native with Django-Rest-Framework and runs into this error.

First change your local host ip (127.xxx) to 10.0.2.2 so the request to the API looks somewhat like this. This is because of the emulator. Your local host IP points to the Emulator itself, but you need to access your local computer:

axios.get("http://10.0.2.2:8000/profile/api/products/")
        .then(response => this.setState({products: response.data}))
        .catch((error) => console.log(error));

Then you need to add the IP to allowed Hosts in your Django project settings. So you need to add:

ALLOWED_HOSTS = ['10.0.2.2']

And there you go ...

score 0 · Answer 3 · answered Nov 01 '17 at 04:28

Pertinent discussion: https://github.com/facebook/react-native/issues/10404

Determine your IP:

ifconfig | grep "inet " | grep -Fv 127.0.0.1 | awk '{print $2}'

When making your network request, don't make it to localhost. Use your IP.

Example:

fetch('http://10.0.0.19:8080')
    .then((response) => response.json())

Great explanation by github user StephanPartzsch:

The thing is, that iOS is running in a simulator and Android is running in an emulator. The localhost is pointing to the environment in which the code is running. The emulator emulates a real device while the simulator is only imitating the device. Therefore the localhost on iOS / Android is pointing to the emulated iOS / Android device. And not to the machine on which your server is running. The solution is to replace localhost with the IP address of your machine.

Network Error when making GET request to local RestAPI

3 Answers3