如何使用 React-native 访问 Django 本地服务器数据？

Posted 2023-02-21

【中文标题】如何使用 React-native 访问 Django 本地服务器数据？

【英文标题】：How to access Django local server data with React-native?

【发布时间】：2020-11-21 23:06:08

【问题描述】：

我使用 django rest 框架构建了一个 Django API。 并且想在我的 react-native 应用程序中访问 api 的 json 响应数据。 但是出现错误（网络请求失败）

DJANGO 回应

反应原生

错误

网络请求失败

node_modules/whatwg-fetch/dist/fetch.umd.js:505:17 in setTimeout$argument_0 node_modules/react-native/Libraries/Core/Timers/JSTimers.js:135:14 in _callTimer node_modules/react-native/Libraries/Core/Timers/JSTimers.js:387:16 in callTimers node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue [native code]:null in callFunctionReturnFlushedQueue

【参考方案1】：

请考虑采纳以下建议：

在您的设备上激活开发者模式，然后打开“USB 调试”模式。

将您的设备插入电脑上的 USB 端口

将此行添加到scripts 对象内的package.json 文件中：

"android-dev": "adb reverse tcp:8081 tcp:8081"

检查您的 settings.py Django 项目文件中是否配置了 CORS，并确保允许所有主机访问该项目（如果这对您的测试很重要，请指定主机）。

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

MIDDLEWARE = [
...
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]

CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = ['*']

检查您的本地 IP（通常以 192.168... 开头）。通过在 Windows 上运行 ipconfig 或在 linux 上运行 ifconfig 来做到这一点。

确保您使用与本地网络相同的 IP 运行 Django 项目。例如，我的本地 ip 是 192.168.15.2，所以我运行python manage.py runserver 192.168.15.2:8000。就我而言，我喜欢使用 Pycharm，所以我在服务器设置中配置它

最后一步，在您的请求中使用相同的 IP，并在请求标头中添加 "Access-Control-Allow-Origin":'*'。所以它会是这样的：

请注意，我使用 axios 发送请求，但您可以使用 fetch here 检查如何在请求中添加标头。

祝你一切顺利。这真是一个烦人的问题，我花了一些时间才弄清楚。