React native fetch api 不适用于 localhost、IP 甚至 10.0.2.2

Posted 2023-02-23

【中文标题】React native fetch api 不适用于 localhost、IP 甚至 10.0.2.2

【英文标题】：React native fetch api does not work with localhost, IP, or even 10.0.2.2

【发布时间】：2019-02-24 06:15:45

【问题描述】：

我在我的 android 设备上使用 expo 客户端，并在localhost:8000 设置了一个 django 服务器，我正在尝试使用 fetch 在 react native 中访问和端点。我看过 How can I access my localhost from my Android device? How do you connect localhost in the Android emulator? 和 How to connect to my http://localhost web server from Android Emulator in Eclipse 但这没有用。

我也尝试使用我机器的 ip 地址而不是 localhost，但没有结果。这是一个示例代码

componentDidMount()
    return fetch('http://my-ip-address:8000/restapi/')
      .then((response) => 
        console.log("success")
        response = response.json()
      ).catch(error => 
        console.error(error)
      )
  

我在这里做错了什么？

【问题讨论】：

您是在设备还是模拟器上进行测试？

尝试 127.0.0.1 作为您的 IP 地址。如果这不起作用，请尝试使用邮递员查看是否可以交流。

我正在使用我的移动设备。我试过 127.0.0.1。那没有用，我还使用邮递员来验证我得到了正确的响应

使用实际设备有点不同。根据您提供的仿真器链接，并使用 10.0.2.2，我假设您使用的是仿真器。您的手机是否在同一个网络上。您是否确认您没有防火墙或任何阻止传入连接/端口的东西？

要明确一点，控制台中没有打印“成功”，对吗？而且您使用的是本地网络地址，并且所有相关设备都连接到同一个网络？

【参考方案1】：

这可能是 django 配置的问题。特别是如果您手机的网络浏览器也无法获得预期的响应。

来自Django docs：

Note that the default IP address, 127.0.0.1, is not accessible from other machines
on your network. To make your development server viewable to other machines on the
network, use its own IP address (e.g. 192.168.2.1) or 0.0.0.0 or :: (with IPv6 enabled).

请参阅How to access the local Django webserver from outside world，尽管答案也适用于本地网络：

python manage.py runserver 0.0.0.0:8000

如果您知道，可以将0.0.0.0 替换为机器的地址。

---

在您的响应处理程序中还值得注意的是，response.json() 返回的是 Promise，而不是 JSON。相反，你想要：

fetch('http://my-ip-address:8000/restapi/')
  .then(response => response.json())
  .then(responseJson => 
    console.log("success");
    console.log(responseJson);
  )
  .catch(error => 
    console.error(error);
  )

【参考方案2】：

除了csum的回答，请检查防火墙是否允许django服务器远程访问你的android设备（设备IP为远程）。如果您安装了任何防病毒并控制防火墙，请确保其防火墙中有规则。

【参考方案3】：

解决方案

根据您的代码，

你的 django 端口：:8080 你的获取的目标端口：:8000

再次检查。 我建议您在测试服务器 api 时使用PostMan。

【讨论】：

对不起，我犯了一个错误。端口是 8000