CODEWITHSUNDEEP
androiddjangoreact-nativeandroid-studiodjango-cors-headers
mightycode Newton
mightycode Newton

Reputation: 3949

connecting react native with django, fetching data

I just try to connect the native react app with the django backend.

So in Django I installed the django.cors.headers. And i did the configuration in settings.

I am using android studio. And I am using the emulator. And that works fine.

And I have the settings for the cors in django:

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]


CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = [
    "http://localhost:8081",
    "http://localhost:19006",
    "http://localhost:19002",
    "http://192.168.1.69:19000",
]

and react native

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

So in postman it runs fine:

I get the correct response:

[
    {
        "group_name": "zoogdieren",
        "description": "Dit zijn zoogdieren"
    },
    {
        "group_name": "vissen",
        "description": "Dit is de hoofgroep vissen"
    }
]

and this are the messages in react native:

 Opening on Android...
› Opening exp://192.168.1.69:19000 on MY_ANDROID
› Press ? │ show all commands
› Reloading apps
Android Bundling complete

But I still get this errors:

Network request failed
at node_modules\whatwg-fetch\dist\fetch.umd.js:null in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue

So what I have to change?

Thank you

Upvotes: 1

Views: 268

Answers (1)

Nguemeta joel
Nguemeta joel

Reputation: 417

Your problem lies in the url. Your emulator and server must be connected on the same network. Mobile emulators such as Android studio or even Xcode do not make calls in localhost(127.0.0.1)

To do this, you will connect your computer to a network (internet access is not required).

You query the ip address of your machine on the network (under windows it's ipconfig, under Linux it's ip address)

At the end of the start the django server on the ip address. example:

python manage.py runserver 125.568.97.65:8000

You come back to react native and you replace:

useEffect(() => {
    fetch("http://125.568.97.65:8000/animalGroups/group/", {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
        },
    })
        .then((res) => res.json())
        .then((jsonres) => setAnimalGroup(jsonres))
        .catch((error) => console.error(error));
}, []);

Good luck

Upvotes: 1

Related Questions