React应用移动端请求异常：iOS报Load failed/Android报failed to fetch

核心问题定位 #

你的请求URL使用了http://127.0.0.1:8000，这是本地回环地址——Windows浏览器能正常请求是因为它和后端服务在同一台机器，但移动端设备无法通过这个地址访问你电脑上的Django服务，这是导致移动端报错的首要原因。

具体解决步骤 #

• 替换本地回环地址为电脑局域网IP
  找到你电脑在局域网内的IP地址（Windows用ipconfig命令，Mac/Linux用ifconfig或ip addr命令），将请求URL修改为http://你的局域网IP:8000/uploading_firstName，同时确保移动端设备和你的电脑连接在同一WiFi网络下。

• 调整Django服务绑定地址
  Django默认仅绑定127.0.0.1，局域网内设备无法访问。启动服务时需指定绑定所有网卡：

  python manage.py runserver 0.0.0.0:8000
  

• 校验CORS配置有效性
  确认CORS_ORIGIN_WHITELIST已包含移动端前端的访问地址（如局域网IP+端口），示例配置：

  CORS_ORIGIN_WHITELIST = [
      "http://你的前端局域网IP:3000",  # React默认开发端口为3000
      "http://localhost:3000",
  ]
  

  测试阶段可临时设置CORS_ORIGIN_ALLOW_ALL = True（生产环境禁用此配置）。

• 处理移动端HTTP限制
  iOS Safari和部分Android浏览器会限制非HTTPS请求，开发环境下可：

  • 在iOS Safari设置中开启「允许不安全的内容」（路径：设置→Safari→高级→网站数据→找到对应域名→允许不安全内容）
  • 生产环境需配置HTTPS证书

• 添加请求错误捕获
  给Fetch请求补充错误处理逻辑，便于排查具体问题：

  fetch("http://你的局域网IP:8000/uploading_firstName", {
    method: 'POST',
    body: JSON.stringify({firstName: "kim"}),
    headers: {
      'Content-Type': 'application/json',
    },
  })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('请求失败详情:', error));
  

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