Android Studio 连接react native与django,获取数据

uxhixvfz  于 2023-01-21  发布在  Android
关注(0)|答案(1)|浏览(176)

我只是试着把原生的react应用和django后端连接起来。
所以在Django中我安装了django.cors.headers,并在设置中进行了配置。
我使用的是android studio。我使用的是模拟器。效果很好。
我在django中设置了cors:

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

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

那我要改变什么呢?
谢谢

q7solyqu

q7solyqu1#

你的问题出在url上。你的模拟器和服务器必须连接在同一个网络上。Android studio甚至Xcode等移动的模拟器都不会在**localhost(127.0.0.1)**中进行调用
为此,您需要将计算机连接到网络(不需要Internet访问)。
您在网络上查询计算机的IP地址(在Windows下为ipconfig,在Linux下为ip address
在结束时启动django服务器上的ip地址。例如:

python manage.py runserver 125.568.97.65:8000

你回来React本土,你取代:

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

祝你好运

相关问题