CODEWITHSUNDEEP
react-nativedjango-rest-frameworkaxios
Xen_mar
Xen_mar

Reputation: 9732

Network Error when making GET request to local RestAPI

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)

Upvotes: 0

Views: 3237

Answers (3)

zero_cool
zero_cool

Reputation: 4264

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.

Upvotes: 0

Xen_mar
Xen_mar

Reputation: 9732

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

Upvotes: 0

sebastianf182
sebastianf182

Reputation: 9978

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

Upvotes: 2

Related Questions