React Native对接Django REST API遇请求错误，求集成解决方案

一、先搞定Django后端的关键配置 #

• 允许外部设备访问：修改settings.py中的ALLOWED_HOSTS，加入你的电脑局域网IP和0.0.0.0，比如：

  ALLOWED_HOSTS = ['0.0.0.0', '192.168.1.105']
  

  启动Django服务时要绑定到0.0.0.0：

  python manage.py runserver 0.0.0.0:8000
  

• 解决跨域问题：安装django-cors-headers并配置：
  1. 安装依赖：pip install django-cors-headers
  2. 在INSTALLED_APPS中添加'corsheaders'
  3. 在MIDDLEWARE中把'corsheaders.middleware.CorsMiddleware'放在django.middleware.common.CommonMiddleware之前
  4. 开发环境下添加：CORS_ALLOW_ALL_ORIGINS = True（生产环境要指定具体允许的域名）

二、React Native端的正确配置与请求写法 #

• 确保网络互通：手机和电脑必须在同一WiFi局域网下；如果用USB调试，可执行adb reverse tcp:8000 tcp:8000，这样RN里用http://localhost:8000就能访问Django服务。
• 不要用localhost：直接用电脑的局域网IP作为API地址，比如http://192.168.1.105:8000/api/your-data/
• 规范的fetch请求示例：

  const loadData = async () => {
    try {
      const res = await fetch('http://192.168.1.105:8000/api/items/');
      if (!res.ok) {
        throw new Error(`请求失败，状态码：${res.status}`);
      }
      const data = await res.json();
      console.log('获取到的数据：', data);
      // 这里处理数据，比如更新state
    } catch (err) {
      console.error('请求出错：', err.message);
    }
  };
  

• 检查Android权限：确认android/app/src/main/AndroidManifest.xml里有网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

三、常见错误排查 #

• 无法连接到API：检查电脑防火墙是否放行8000端口，或者临时关闭防火墙测试；确认Django服务正常运行；手机和电脑是否在同一网络。
• CORS相关错误：核对django-cors-headers的配置顺序，确保中间件放在正确位置，CORS_ALLOW_ALL_ORIGINS是否开启。
• 请求返回404/500：404是接口路径写错，检查Django的URL配置；500是后端代码报错，查看Django控制台的错误日志定位问题。

内容的提问来源于stack exchange，提问作者falcon