Соединение react native с django, получение данных

Я просто пытаюсь соединить нативное приложение react с бэкендом django.

В Django я установил django.cors.headers. И я сделал конфигурацию в настройках.

Я использую android studio. И я использую эмулятор. И это работает нормально.

И у меня есть настройки для корсов в 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",
]

и 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));
    }, []);

В postman он работает нормально:

Я получаю правильный ответ: 

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

и это сообщения в react native:

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

Но я все еще получаю эту ошибку:

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

Так что же я должен изменить?

Спасибо

Салют,

Ваша проблема заключается в url. Ваш эмулятор и ваш сервер должны быть подключены к одной сети. Мобильные эмуляторы, такие как Android studio или даже Xcode, не делают вызовов на localhost(127.0.0.1)

<<< Для этого необходимо подключить компьютер к сети (доступ в Интернет не требуется).

Вы запрашиваете ip-адрес вашей машины в сети (в windows это ipconfig, в Linux - ip address)

В конце запускает сервер django на ip-адресе. пример:

python manage.py runserver 125.568.97.65:8000

Вы возвращаетесь в react native и заменяете:

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));
}, []);

Боннский шанс

Ваша проблема заключается в url. Ваш эмулятор и сервер должны быть подключены в одной сети. Мобильные эмуляторы, такие как Android studio или даже Xcode, не делают вызовы в localhost(127.0.0.1)

Для этого необходимо подключить компьютер к сети (доступ в Интернет не требуется).

Вы запрашиваете ip-адрес вашей машины в сети (под windows это ipconfig, под Linux - ip address)

В конце запустите сервер django на ip-адресе. пример:

python manage.py runserver 125.568.97.65:8000

Вы возвращаетесь к родной реакции и заменяете:

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));
}, []);

Удачи

Вернуться на верх