React Native Android Fetch 在连接到本地 API 时失败

Question

我在我的 react-native Android 应用程序中使用 fetch API 向本地 API 发出请求。我通常在 http://localhost:8163 从 react web 应用程序中查询上述 API。

我正在以调试器模式在我的物理设备上测试我的应用程序。我在某处读到 react-native 无法像 Web 应用程序那样查询 localhost。显然，您必须使用 http://10.0.2.2:[PORT_NUMBER_HERE]/ 根据 Android 模拟器底座，它是 `http://127.0.0.1:[PORT_NUMBER_HERE] 的别名。我不确定这是否是我在物理设备上测试时应该做的。

我的获取代码如下所示：

 fetchToken() {
    fetch('http://10.0.2.2:8163/extension/auth', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json'
        }
    })
    .then((response)) => console.log('successful fetchToken response: ', response.json()))
    .catch((error) => console.log('fetchToken error: ', error))
    .done();
}

请求总是挂起一段时间，然后到达 catch 块，并出现无用的错误 TypeError: Network request failed(...) 。检查我的本地 API 的日志，他们根本没有注册请求。

所以我不知道我是否正确地查询我的本地 API 以获取我想要的资源，如果我是，我不知道为什么获取失败。

原文由 seanchen1991 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您无法访问本地开发服务器，因为 ADB 尚未转发该端口。当您运行 react-native run-android 时，React Native 将端口 8081 映射到 USB 上的移动设备。当您断开 USB 时，您将无法再刷新或热重载您的代码。所以在这种情况下你可以做两件事，要么像 React Native 那样映射你的本地服务器端口，要么使用你的本地 IP 地址。

1. 映射端口

这仅在您使用 Android 6.0+ 时有效。要使用 ADB 转发端口，请在终端中运行以下命令：

    adb reverse tcp:8163 tcp:8163

这会将您的本地 8163 端口映射到移动设备的 8163 端口。您将能够通过这种方式访问您的开发服务器。

1. 使用本地 IP 地址

您还可以在 React Native 开发应用程序上使用本地 IP 来重新加载它们而无需 USB。摇动您的设备或长按菜单按钮以打开开发者菜单。打开 Dev Settings ，然后点击 Debug server host & port for device 。在这里，您可以使用端口号 8081 输入您机器的本地 IP。例如。如果您的机器的 IP 是 192.168.1.100 那么您将在此处输入 192.168.1.100:8081 以成功连接。现在我们已经介绍了我们可以重新加载应用程序。在此之后，当您想使用本地计算机的开发服务器时，请使用与服务器端口号相同的 IP。

你应该很好地接受这个。

原文由 Jagjot 发布，翻译遵循 CC BY-SA 3.0 许可协议