React Native对接Django后端出现Axios网络错误求助

1. 修正API请求地址 #

React Native模拟器/真机无法通过127.0.0.1访问电脑本地的Django服务，需替换为电脑的局域网IP地址：

• 查看电脑局域网IP：
  • Windows：运行ipconfig获取IPv4地址
  • Mac/Linux：运行ifconfig或ip addr获取inet地址
• 修改Axios请求地址：

  const response = await axios.post(
    'http://你的电脑局域网IP:8000/validationServer/validate/',
    { url }
  );
  

2. 修复Django的CORS配置 #

当前CORS中间件顺序错误，且缺少允许来源配置：

• 调整Middleware顺序：将corsheaders.middleware.CorsMiddleware移至django.middleware.common.CommonMiddleware之前，正确的Middleware列表：

  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允许来源：在settings.py末尾添加：

  # 开发环境可临时允许所有来源
  CORS_ALLOW_ALL_ORIGINS = True
  # 生产环境建议指定具体来源
  # CORS_ALLOWED_ORIGINS = [
  #     "exp://你的电脑局域网IP:19000",
  #     "http://你的电脑局域网IP:8000",
  # ]
  

3. 更新Django的ALLOWED_HOSTS #

允许局域网IP访问Django服务：

ALLOWED_HOSTS = ["127.0.0.1", "你的电脑局域网IP"]

4. 确保Django服务绑定正确地址 #

启动Django时，绑定到0.0.0.0以允许所有网卡访问：

python manage.py runserver 0.0.0.0:8000

5. 真机测试额外配置 #

如果使用真机测试：

• 确保手机与电脑处于同一局域网
• Android需在AndroidManifest.xml添加网络权限：

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

• iOS需在项目设置中开启网络访问权限

6. 优化请求验证（可选） #

显式指定Axios请求的Content-Type，确保后端能正确解析：

const response = await axios.post(
  'http://你的电脑局域网IP:8000/validationServer/validate/',
  { url },
  {
    headers: {
      'Content-Type': 'application/json',
    },
  }
);

注：React Native中setcountChar是异步操作，直接在其后打印countChar无法获取最新值，可改为打印response.data.character_count验证返回结果。

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