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

问题描述

我正在使用本机Android应用程序中的访存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应用程序一样查询localhost.显然，您必须使用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.

我的提取代码如下:

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();
}

请求始终挂起一会儿，然后由于无用错误TypeError: Network request failed(...)到达catch块.检查我的本地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 & port for device.在这里，您可以输入端口号为8081的机器的本地IP.对于前.如果您计算机的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屋！