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

问题描述

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

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，一切似乎都正常，也从安装的任何网络浏览器(safari/chrome)，甚至我们测试了浏览器 INSIDE react-native iOS，并且它工作正常.

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 core 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地址)
• React Native 空白项目(从头开始)
• API .net 核心空白项目(从头开始)
• 运行snack expo + api .net core
• ip 转发(我们不能这样做对我们的工作政策/不是我们正在寻找的解决方案)
• http/https
• 不同的端口
• 来自 react-native 的 Android 和 ios 权限
• 相同的网络不同的 ip(这有点有效，但我们不知道为什么它在同一 ip (localhost) 中运行 react-native 和 api 不起作用)
• 10.0.2.2(安卓)
• 在 api .net 核心上启用 cors(但显然这不适用于本机应用程序，仅适用于网络)
• 通过 ngrok/serveo 公开 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 响应.我想它是本地主机"来自本机反应的 ip.如果 React Native 不允许我这样做，我应该如何从本地主机获取 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. I suppose it is the "localhost" ip from react native. How am I supposed to fetch an ip from localhost if react native is not letting me to do so?

这次我们不得不采用计划 B，我们已经让它在 api 上与 docker 一起工作，但我需要一个解决方案来解决这个问题.我 99% 确定问题是本机问题，而不是其他问题.

We had to go for plan B this time around, we've made 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.

"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 Native 部分，我只是用我的 IP 更改了我的本地主机:

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

fetch('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/')

这对我完全有用

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