React Native Android Fetch 在连接到本地 API 时失败 [英] React Native Android Fetch failing on connection to local API

问题描述

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

I'm using the fetch API in my react-native Android app to make requests to a local API. I usually query said API from react web apps at http://localhost:8163.

我正在以调试器模式在我的物理设备上测试我的应用程序.我在某处读到 react-native 不能像 Web 应用程序一样查询本地主机.显然，您必须使用 http://10.0.2.2:[PORT_NUMBER_HERE]/ 根据 Android 模拟器码头，这是 `http://127.0.0.1:[PORT_NUMBER_HERE] 的别名.我不确定这是不是我应该在物理设备上进行测试.

I'm testing my app on my physical device in debugger mode. I read somewhere that react-native can't query localhost the same way a web app can. Apparently you have to use http://10.0.2.2:[PORT_NUMBER_HERE]/ which is an alias for `http://127.0.0.1:[PORT_NUMBER_HERE] according to the Android emulator docks. I'm not sure if this is what I'm supposed to be doing for testing on a physical device.

我的提取代码如下所示:

My fetch code looks like the following:

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 的日志，他们根本没有注册请求.

The request always hangs for a while and then reaches the catch block with the unhelpful error TypeError: Network request failed(...). Checking the logs for my local API, they don't register the request at all.

所以我不知道我是否正确查询本地 API 以获取我想要的资源，如果是，我不知道获取失败的原因.

So I have no idea if I'm querying my local API correctly to get the resource that I want, and if I am, I don't know why the fetch is failing.

推荐答案

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

You are not able to access your local development server because that port hasn't been forwarded by ADB yet. When you run react-native run-android, React Native maps the port 8081 with your mobile device on USB. When you disconnect your USB you won't be able to refresh or hot reload your code anymore. So in this situation you can do 2 things, either map your local server port just like React Native does or use your local IP address.

1. 映射端口

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

This only works if you are using Android 6.0+. To forward a port using ADB run the following command in your terminal:

adb reverse tcp:8163 tcp:8163

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

This will map your local 8163 port to mobile's 8163 port. You'll be able to access your development server this way.

使用本地 IP 地址

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

You can also use your local IP on React Native development app to reload them without USB. Shake your device or long press the menu button to open developer menu. Open Dev Settings, then tap Debug server host & port for device. Here you can enter your machine's local IP with port number 8081. For ex. if your machine's IP is 192.168.1.100 then you'd enter 192.168.1.100:8081 in here for successful connection. Now we have covered that we can reload the app. After this when you want to use your local machine's development server use the same IP with your server's port number.

你应该很乐意接受这个.

You should be good to go with this.

这篇关于React Native Android Fetch 在连接到本地 API 时失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！