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)

stackoverflow.com/questions/33704130/…

Jagjot
– Jagjot

2017-10-31 19:19:55 +00:00
Commented Oct 31, 2017 at 19:19 — Jagjot
– Jagjot, Commented Oct 31, 2017 at 19:19

sebastianf182 · Accepted Answer · 2017-10-31 16:35:03Z

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, 2017 at 16:35

sebastianf182

9,9783 gold badges38 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Xen_mar Over a year ago

hey, yeah - I found this topic on SO: stackoverflow.com/questions/5528850/… 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.

sebastianf182 Over a year ago

Try changing componentWillMount for ComponentDidMount

Xen_mar Over a year ago

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 Over a year ago

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.

sebastianf182 Over a year ago

You said you get error 400. Maybe you are missing a header in the request? Possibly the content-type

Xen_mar · Accepted Answer · 2017-10-31 17:26:44Z

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 ...

zero_cool · Accepted Answer · 2017-11-01 04:28:38Z

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.

Collectives™ on Stack Overflow

Network Error when making GET request to local RestAPI

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related