访问本地主机api时如何修复react-native网络错误 [英] How to fix network error in react-native when access localhost api

问题描述

我们正在尝试通过本地主机从react-native(版本0.59)连接到API(.net核心2.2)，两者显然都运行在同一ip，不同的端口，react-native在端口8080上以及api在44344上，问题发生在我们从react-native获取网址的那一刻

We're trying to connect to an API (.net core 2.2) from react-native (version 0.59), via localhost, both apparently running on the same ip, different ports, react-native on port 8080, and the api on the 44344, the issue happens the moment we fetch the url from react-native

我们还测试了从Postman运行url的情况，即使从已安装INSIDE react-native iOS的浏览器进行了测试，一切似乎还不错，即使从已安装的任何Web浏览器(Safari/chrome)也可以正常工作.

We’ve also tested running the url from Postman and everything seems ok, also from any of the web browser installed (safari/chrome), even we tested the browser INSIDE react-native iOS, and it works.

任何在localhost外部运行的api都可以正常运行，是我们失败的localhost.

Any api running outside localhost works perfectly, is the localhost were we failed.

Network request failed.

onerror
    whatwg-fetch.js:504:29
dispatchEvent
    event-target.js:172:43
setReadyState
    XMLHttpRequest.js:580:29
__didCompleteResponse
    XMLHttpRequest.js:394:25
emit
    EventEmitter.js:190:12
__callFunction
    MessageQueue.js:366:47
<unknown>
    MessageQueue.js:106:26
__guard
    MessageQueue.js:314:10
callFunctionReturnFlushedQueue
    MessageQueue.js:105:17
callFunctionReturnFlushedQueue
    [native code]:0

获取api的部分代码(函数)，非常简单(目前而言)

Part of the code (function) that fetch the api, very simple (for now)

async Submit(){
  //GET METHOD
  try {
        let response = await fetch('https://192.168.1.56:44344/api/values');
        let responseJson = await response.json();
        return Alert.alert(JSON.stringify(responseJson));
  } catch (error) {
        console.error(error);
  }
}

好吧，首先，我们尝试了所有可能的解决方案，以将我的React Native应用程序连接到我的.net核心api rest，它们都在localhost中运行，这是到目前为止，我们已经尝试过的事情到目前为止，仍然没有结果.

Ok first of all, we've tried EVERY possible solution,to connect my react native app to my .net core api rest, both running in localhost, this is the list so far, of the things that we've tried so far, and still no result.

• 本地主机
• 127.0.0.1
• 计算机ip(网络ip而非mac地址)
• 反应本机空白项目(从头开始)
• API .net核心空白项目(从头开始)
• 运行零食博览会+ api .net核心
• ip转发(我们不能对我们的工作政策做到这一点/不是我们正在寻找的解决方案)
• http/https
• 不同的端口
• react-native的Android和ios权限
• 同一网络不同的ip(这种排序有效，但是我们不知道为什么在同一ip(本地主机)中同时运行react-native和api不能正常工作
• 10.0.2.2(对于android)
• 在api .net核心上启用cors(但显然，这不适用于本机应用程序，仅适用于网络)
• 通过ngrok/servo公开IP(我们不能对我们的工作政策做到这一点，而不是我们正在寻找的解决方案)
• 飞盘
• Axios
• Websocket(我们不能对我们的工作政策做到这一点/不是我们正在寻找的解决方案)
• XMLHttpRequest(状态代码错误0)
• 防火墙/代理(我们的网络没有防火墙和代理)
• Web浏览器插件(已停用和/或卸载)
• 缓存/cookies
• Docker(我们不能对我们的工作政策做到这一点/不是我们正在寻找的解决方案)
• 重新启动我的Macbook pro

我们希望React Native能够获取api，因此我们可以继续进行Office 365登录身份验证.

we expect react native to fetch the api, so we can continue with the office 365 login authentication.

我刚刚发现获取机器ip(这次运行Windows)，我的ip在api和react native上均为192.168.0.9，获取结果显示了标题中的10.0.2.2:80json响应中的一个，我猜想是react native的"localhost" ip，如果React native显然不允许我这样做，我应该如何从localhost获取ip.

I just discovered that fetching the machine ip (this time running windows), with my ip being 192.168.0.9 both on the api and the react native, the fetch result showed me the 10.0.2.2:80 in the header of the json response, which i suppose is the "localhost" ip from react native, how am i suppose to fetch an ip from localhost if react native is not letting me to do so apparently.

这一次我们不得不进行计划B，我们使其与api上的docker一起工作，但是我需要针对此问题的解决方案，我99％的确定该问题是react-native，什么也没有其他

We had to go for plan B this time around, we make it work with a docker on the api, but i need a solution for this problem, i'm 99% sure the issue is react-native and nothing else

已解决!!!!这些星期后，我的一所大学设法解决了这个问题，这就是他的解决方法，首先，我的macbook pro中的防火墙是垃圾，我们无法使其正常运行，其次，我们解决了并发现我们的api存在问题，因此他发现重定向位于https上，并且证书无法正常工作，因此他更改了此

SOLVED !!!! after all these weeks one of my colleges manage to solve it, this is how he did it, first of all, the firewall in my macbook pro is a piece of garbage, and we couldn't make it work properly, second, we solved that and found out our api was having issues, so he found out the redirection was on https, and the certifications weren't working properly, so he changed this

"applicationUrl": "http://192.168.0.114:5001;https:192.168.0.114:5001"

到

"applicationUrl": "http://192.168.0.114:5001"

推荐答案

我从react-native获取localhost API时遇到了同样的问题.这是我为解决此问题所做的工作.在启动类中，我从Configure方法中删除了 //app.UseHttpsRedirection(); .(不确定是否需要)

I got the same issue while fetching localhost API from react-native. Here is what I did to solve this issue. In the startups class, I removed //app.UseHttpsRedirection(); from Configure method.(Not sure if it is needed)

在那之后，在properties文件夹下的launchsetting.js文件中，我从

After that in the launchsetting.js file under the properties folder, I changed from

"applicationUrl":" https://localhost:5001; http://本地主机:5000 "

"applicationUrl": "https://localhost:5001;http://localhost:5000"

到"applicationUrl":" http://localhost:5000 "

to "applicationUrl": "http://localhost:5000"

在React本机部分中，我只是用IP更改了本地主机:

and in the React native part, I simply changed my localhost with my IP:

获取(' http://localhost:5000/values/')进行获取(' http://127.0.0.1:5000/values/')

fetch('http://localhost:5000/values/') to fetch('http://127.0.0.1:5000/values/')

这完全适合我

这篇关于访问本地主机api时如何修复react-native网络错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！