我只是试着把原生的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
那我要改变什么呢?
谢谢
1条答案
按热度按时间q7solyqu1#
你的问题出在url上。你的模拟器和服务器必须连接在同一个网络上。Android studio甚至Xcode等移动的模拟器都不会在**localhost(127.0.0.1)**中进行调用
为此,您需要将计算机连接到网络(不需要Internet访问)。
您在网络上查询计算机的IP地址(在Windows下为
ipconfig
,在Linux下为ip address
)在结束时启动django服务器上的ip地址。例如:
你回来React本土,你取代:
祝你好运