How to communicate django api with frontend react native?

Question

I have a django application and I have a react native app. I am running the android emulator from android studio.

And now I try to connect the backend with the frontend. I studied the example from: https://reactnative.dev/docs/network

And the example url: https://reactnative.dev/movies.json' works.

I run the native-react app on port: http://192.168.1.69:19000/ And I run the backend on port: http://127.0.0.1:8000/api/movies/

But now I try to connect with my own localhost data. So this is my component:

import { ActivityIndicator, FlatList, Text, View } from "react-native";
import React, { Component } from "react";

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            isLoading: true,
        };
    }

        async getMovies() {
        try {
            const response = await fetch("http://127.0.0.1:8000/api/movies/", {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin": "*",
                },
            });
            const json = await response.json();
            this.setState({ data: json.movies });
        } catch (error) {
            console.log(error);
        } finally {
            this.setState({ isLoading: false });
        }
    }

    componentDidMount() {
        this.getMovies();
    }

    render() {
        const { data, isLoading } = this.state;

        return (
            <View style={{ flex: 1, padding: 24 }}>
                {isLoading ? (
                    <ActivityIndicator />
                ) : (
                    <FlatList
                        data={data}
                        keyExtractor={({ id }, index) => id}
                        renderItem={({ item }) => <Text>{item.title}</Text>}
                    />
                )}
            </View>
        );
    }
}

this is the data from postman:

[
    {
        "id": 1,
        "title": "Husband",
        "description": "Very nice wife cocks the man",
        "no_of_ratings": 1,
        "avg_rating": 5.0
    },
    {
        "id": 2,
        "title": "Nice movie",
        "description": "Description ah, niceNICE",
        "no_of_ratings": 0,
        "avg_rating": 0
    }
]

But if I try to run this example. I get this error:

Access to fetch at 'http://127.0.0.1:8000/api/movies/' from origin 'http://localhost:19006' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Question: how to make a connection from native react witht the backend?

Oke, I installed:django.cors.headers and in settings I did all the configuration.

So in django I have this:

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

and in react native I have this:

useEffect(() => {
        fetch("http://127.0.0.1:8000/animalGroups/group/", {
            method: "GET",
        })
            .then((res) => res.json())
            .then((jsonres) => setAnimalGroup(jsonres))
            .catch((error) => console.error(error));
    }, []);

and the native react app is running on:

› Opening exp://192.168.1.69:19000 on MY_ANDROID

So but I still get this error:

Network request failed
at node_modules\whatwg-fetch\dist\fetch.umd.js:null in setTimeout$argument_0

Does this answer your question? React Native Android Fetch failing on connection to local API — Ragnar
– Ragnar, Commented Jan 2, 2023 at 10:16
I tried: 10.0.2.2:3000/api/movies and 10.0.2.2:8080/api/movies. But still gettting the error can't fetch data — mightycode Newton
– mightycode Newton, Commented Jan 2, 2023 at 10:38
@Ragnar. What exactly do you mean? Used by react-native is: Metro waiting on exp://192.168.1.69:19000 and in the browser I am using: localhost:19006 — mightycode Newton
– mightycode Newton, Commented Jan 2, 2023 at 11:24

Lucas · Accepted Answer · 2023-01-02 20:03:27Z

1

Follow the steps to Set CORS and call your application endpoint directly.

1.) Set the backend endpoint to accept and display data from incoming requests. i.) first do something like this pip install : pip install django-cors-headers ii.) in your settings.py file, add the following code snippet to your file

INSTALLED_APPS = [
    
             ...
    
             'corsheaders',
    
            ...
    
            ]

iii.) add CORS middleware to django file

MIDDLEWARE = [
  'django.middleware.security.SecurityMiddleware',
  ...
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
  'corsheaders.middleware.CorsMiddleware', //<== Add this
    ]

iv.) add CORS_ORIGIN_ALLOW_ALL = True to settings.py

v.) Endpoint is now accessible to every app.

2.) Make your fetch to be something like this

getMovies = async () => {
    var url = 'http://127.0.0.1:8000/api/movies/';

    fetch(url, {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Content-type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      },
    })
      .then(response => response.json())
      .then(responseJson => {
        setTransaction_details(responseJson);
        setLoading(false);
      });
  };

answered Jan 2, 2023 at 20:03

Lucas

1357 bronze badges

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

2 Comments

mightycode Newton Over a year ago

@Lucas.Thank you for you contribution. I waas a couple of days under wool. But If it works I let you know.

mightycode Newton Over a year ago

@Lucas.updated the post

Isaac Unaeze · Accepted Answer · 2023-05-24 09:00:13Z

0

if this isn't too late, use the IP your React native app opens to connect to your Django api.

use: 192.168.1.69: for your allowed host in stettings.py

also, add the following to setting.py directly under the allowed host settings.

CORS_ORIGIN_WHITELIST = [
    'http://192.168.1.69:19000',
]
CORS_ORIGIN_ALLOW = True
CORS_ALLOW_ALL_ORIGINS = True

then your fetch in react native should be: "http://192.168.1.69:8000/api/movies/" not:'http://127.0.0.1:8000/api/movies/'

note that this is just an example. the IP you use should be the one your React native runs on. so start your React native app, and then copy the IP it gives you to the areas I mentioned above.

best of luck

answered May 24, 2023 at 9:00

Isaac Unaeze

11 bronze badge

Collectives™ on Stack Overflow

How to communicate django api with frontend react native?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related