CODEWITHSUNDEEP
androiddjangoreact-nativefetch-api
protonpasta
protonpasta

Reputation: 45

TypeError: Network request failed (using ReactNative and Django)

I'm developing a mobile app with React Native, and have a REST API in Django at the backend. I want to make a POST request from the app to my API.

Code

function sendDpi() {
const requestOptions = {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    dpi: imageDpi,
  }),
};
fetch('http://127.0.0.1:8000/', requestOptions)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    console.log(error);
  });
}

When sendDpi() is called by my app, I get [TypeError: Network request failed].
127.0.0.1:8000 is where my Django app is running. I've tried using my IP address (as pointed out by this answer) as well.
I've also modified android/app/src/main/AndroidManifest.xml to include android:usesCleartextTraffic="true".

Upvotes: 1

Views: 1067

Answers (3)

Vishal Singh
Vishal Singh

Reputation: 801

In Django settings.py

ALLOWED_HOSTS = ['192.168.1.7']

Starting Django shell

python manage.py runserver 192.168.1.7:8000

Check link on browser if working

http://192.168.1.7:8000/polls/articles/

In React/ReactNative project, see result on shell

useEffect(() => {
        fetch('http://192.168.1.7:8000/polls/articles/',
        {method: 'GET'})
        .then(resp => resp.json())
        .then(data => {
            console.log(data)
        })
        .catch(error => console.log(error))
    }, [])

Upvotes: 0

Gledi
Gledi

Reputation: 51

The suggestion made before was great except the URL needed should be http://10.0.2.2:8000 instead of http://10.0.2.2/8000

Upvotes: 2

Rasmus Knap
Rasmus Knap

Reputation: 293

I think 127.0.0.1:8000 is also localhost. You need to find your external ip address if you use a physical device to test from.

I you test from android emulator you can just use http://10.0.2.2/8000.

Also try to make it work with http first. You might not have a valid SSL certificate. With invalid SSL certificate you also get [TypeError: Network request failed]

Upvotes: 2

Related Questions