访问本地主机 api 时，如何修复 react-native 中的网络错误

Question

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

我们还测试了从 Postman 运行 url 并且一切似乎都正常，也从安装的任何 web 浏览器（safari/chrome），甚至我们测试了浏览器 INSIDE react-native iOS，并且它有效。

在 localhost 之外运行的任何 api 都可以完美运行，是我们失败的 localhost。

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的部分代码（函数），非常简单（暂时）

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 本机应用程序连接到我的 .net 核心 api rest，两者都在本地主机上运行，这是到目前为止我们已经尝试过的事情的列表，并且仍然没有结果。

• 本地主机
• 127.0.0.1
• 计算机 ip .network ip 不是 mac 地址）
• React Native 空白项目（从头开始）
• API .net 核心空白项目（从头开始）
• 跑步零食 expo + api .net 核心
• ip 转发（我们不能这样做，因为我们的工作政策/不是我们正在寻找的解决方案）
• HTTP/https
• 不同的端口
• 来自 react-native 的 Android 和 ios 权限
• Same.network different ip（这种方法有效，但我们不确切知道为什么它不能在同一个 ip（本地主机）中同时运行 react-native 和 api）
• 10.0.2.2（安卓）
• 在 api .net 核心上启用 cors（但显然这不适用于本机应用程序，仅适用于网络）
• 通过 ngrok/serveo 公开 ip（我们不能这样做对我们的工作政策/不是我们正在寻找的解决方案）
• 飞盘
• Axios
• Websocket（我们不能对我们的工作政策这样做/不是我们正在寻找的解决方案）
• XMLHttpRequest（状态码错误0）
• 防火墙/代理（我们的网络没有防火墙和代理）
• Web 浏览器插件（停用和/或卸载）
• 缓存/cookie
• Docker（我们不能这样做，因为我们的工作政策/不是我们正在寻找的解决方案）
• 重新启动我的 macbook pro

我们希望 React Native 获取 api，这样我们就可以继续进行 Office 365 登录验证。

编辑：我刚刚发现获取机器 ip（这次运行的是 Windows），我的 ip 在 api 和 React Native 上都是 192.168.0.9，获取结果显示 881853008065878 中的 10.0.2.2:80 855014098 8380188回复。 我想这是来自 React Native 的“localhost”ip。 如果本机反应不允许我这样做，我应该如何从本地主机获取 ip？

编辑：这次我们必须为 B 计划使用 go，我们已经让它与 api 上的 docker 一起工作，但我需要一个解决这个问题的方法。 我 99% 确定问题是 react-native 而不是别的。

---

编辑：这几周之后，我的一所大学设法解决了这个问题。 首先，我们无法使我的 macbook pro 中的防火墙正常工作。 其次，我们解决了这个问题，发现我们的 api 有问题。 他发现重定向是在 https 上，并且认证工作不正常，所以他改变了这个

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

到

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

Answer 1

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

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

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

到“applicationUrl”：“ http://localhost:5000 ”

在 React 原生部分，我只是用我的 IP 更改了我的本地主机：

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

这完全对我有用

Answer 2

在命令提示符下输入 ipconfig，这样我们就会得到很多地址。 从中获取 IPV4 并将其复制到剪贴板。 然后将此地址粘贴到后端端口地址和前端端口地址。 例如说 IPV4 地址是 192.168.1.3 然后让你的后端路由 API 类似于这个http://192.168.1.3:8080/patients ，其中 8080 是端口号（没关系）。 并在前端使用相同的方法来抓取API结果。

Answer 3

你必须做两件事。

1 - 在您的客户端中使用http://192.168.1.x:8080 （您的本地 ip ）而不是 http:// localhost:8080 。

2 - 将以下代码片段添加到 Startup.cs 中的 .net 核心 Web api 项目。

readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

services.AddCors(options =>
        {

            options.AddPolicy(name: MyAllowSpecificOrigins,
                          builder =>
                          {
                              builder.WithOrigins("http://192.168.1.x:8080")
                              .AllowAnyHeader()
                              .AllowAnyMethod();
                          });

        });

.
.
.
app.UseCors(MyAllowSpecificOrigins);

Answer 4

对我有用的是在终端运行adb reverse tcp:<YOUR PORT> tcp:<YOUR PORT>

我不确定它是如何工作的，但我猜它会从虚拟设备端口到你机器的端口进行某种映射。

例子：

adb reverse tcp:8080 tcp:8080