访问localhost api时如何修复react-native中的网络错误

Question

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

我们还测试了从 Postman 运行 url，一切似乎都很好，也从安装的任何网络浏览器 (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 native 应用程序连接到我的 .net core api rest，两者都在 localhost 中运行，这是迄今为止我们尝试过的事情的列表到目前为止，仍然没有结果。

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

我们希望 react native 获取 api，因此我们可以继续使用 office 365 登录身份验证。

编辑：我刚刚发现获取机器 ip（这次运行 windows），我的 ip 在 api 和 react native 上都是 192.168.0.9，获取结果显示标题中的 10.0.2.2:80的 json 响应。我想这是本机反应的“本地主机”IP。如果 react native 不允许我这样做，我应该如何从 localhost 获取 ip？

编辑：这次我们不得不选择 B 计划，我们已经让它在 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 时遇到了同样的问题。这是我为解决这个问题所做的。 在启动类中，我从 Configure 方法中删除了 //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 中将以下代码 sn-ps 添加到您的 .net core 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);