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

slmsl1lt 于 2023-02-09 发布在 React

关注(0)|答案(6)|浏览(233)

我们尝试通过localhost从react-native（版本0.59）连接到API（. net core 2.2），这两个API显然运行在相同的IP、不同的端口上，react-native运行在端口8080上，而api运行在44344上，当我们从react-native获取url时，问题就发生了
我们还测试了运行的网址从 Postman 和一切似乎都很好，也从任何网络浏览器安装（狩猎/ chrome ），甚至我们测试了浏览器内部的React原生iOS，它的工作。
任何在本地主机之外运行的api都能完美地工作，我们失败的地方是本地主机。

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，两者都在localhost中运行，这是到目前为止的列表，我们已经尝试了到目前为止的事情，仍然没有结果。

本地主机
127.0.0.1
计算机ip（网络ip而不是mac地址）
React原生空白项目（从头开始）
API. net核心空白项目（从头开始）
运行小吃博览会+api. net核心
IP转发（我们无法根据工作策略执行此操作/这不是我们正在寻找的解决方案）
http/https
不同端口
来自react-native的Android和iOS权限
相同的网络不同的ip（这可以工作，但我们不知道为什么它不能在同一个ip（localhost）中运行react-native和api）
10.0.2.2 (for android)
在api.netcore上启用cors（但显然这在原生应用上不起作用，只适用于web）
通过ngrok/serveo公开IP（我们无法这样做，因为我们的工作策略/不是我们正在寻找的解决方案）
飞盘
阿克西奥斯
Websocket（我们不能这样做，因为我们的工作政策/不是我们正在寻找的解决方案）
XMLHttpRequest（状态代码错误0）
防火墙/代理（我们的网络没有防火墙和代理）
Web浏览器插件（停用和/或卸载）
缓存/cookie
Docker（我们不能这样做，因为我们的工作政策/不是我们正在寻找的解决方案）
重新启动我的macbook pro

我们期望react native获取API，因此我们可以继续Office 365登录认证。
编辑：我刚刚发现获取机器ip（这次运行windows），我的ip在api和react native上都是www.example.com，获取结果在json响应的头中显示了10.0.2.2：80。我猜这是react native的"localhost" ip。如果react native不允许我从localhost获取ip，我该怎么做呢？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%确定这个问题是React原生的，没有别的。
编辑：经过这么多周，我的一所大学设法解决了这个问题。首先，我们无法使我的macbook pro的防火墙正常工作。其次，我们解决了这个问题，发现我们的api有问题。他发现重定向是在https上，认证不能正常工作，所以他改变了

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

到

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

react-native

来源：https://stackoverflow.com/questions/57099563/how-to-fix-network-error-in-react-native-when-access-localhost-api

6条答案

按热度按时间

vd2z7a6w1#

我在从react-native获取localhost API时遇到了同样的问题。下面是我解决这个问题的方法。在startups类中，我从Configure方法中删除了****//app.UseHttpsRedirection（）;。（不确定是否需要）
之后，在properties文件夹下的launchsetting.js文件中，我将

“应用程序URL”：““

到**“应用程序URL”：“http://localhost:5000“**
在React原生部分，我只是用我的IP更改了我的本地主机：

获取（“http://localhost:5000/values/”）以获取（“http://127.0.0.1:5000/values/”）

这对我完全有效

赞(0）回复(0）举报 2023-02-09

nxagd54h2#

使用命令提示符并键入ipconfig，这样我们将获得许多地址。从那里获得IPV4并将其复制到剪贴板。然后将此地址粘贴到后端端口地址和前端端口地址。例如，假设IPV4地址为192.168.1.3，然后使您的后端路由API类似于此http://192.168.1.3:8080/patients，其中8080是端口号（没关系），并对前端使用相同的端口号来获取API结果。

赞(0）回复(0）举报 2023-02-09

yh2wf1be3#

你必须做两件事。
1 -在客户端中使用http://192.168.1.x:8080（您的本地IP），而不是http：//localhost：8080。
2 -将以下代码片段添加到Startup.cs中的.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);

赞(0）回复(0）举报 2023-02-09

dgenwo3n4#

对我有效的方法是在终端中运行adb reverse tcp:<YOUR PORT> tcp:<YOUR PORT>
我不确定它是如何工作的，但我猜它会从虚拟设备端口到您的机器端口进行某种Map。
示例：

adb reverse tcp:8080 tcp:8080

赞(0）回复(0）举报 2023-02-09

lskq00tm5#

使用本地IP地址对我很有效，不需要额外的配置。
示例：

fetch("http://192.168.0.103:4000/books", {
      method: "GET"
    })

赞(0）回复(0）举报 2023-02-09

6yoyoihd6#

感谢所有的洞察力，但没有一个以上的解决方案为我工作。
哪些措施有效：
https://ngrok.com/-下载ngrok，注册，并连接您的帐户。ngrok创建一个私有的https localhost隧道。
设置-https://dashboard.ngrok.com/get-started/setup
解压缩以安装：

unzip /path/to/ngrok.zip

连接您的ngrok帐户（无法正常工作的示例身份验证令牌）：

ngrok config add-authtoken 2ySPR5UeS3Fjf5YAblNRe7ZcV1o_9sdf2SDFGHjEQaOCE6xEi

使用命令（带有所需的端口号）：

ngrok http 8080

一旦ngrok在线，替换你的本地主机地址：

http://localhost:8080 
http://127.0.0.1:8080
http://192.168.0.100:8080

转发网址（不起作用的示例地址）：

https://ebda-61-137-45-130.ngrok.io

我已经无数次使用ngrok在各种网络上进行测试，没有任何问题。到目前为止，它是我找到的唯一一种测试本地主机API的简单方法。

赞(0）回复(0）举报 2023-02-09

我来回答

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

6条答案

相关问题

热门标签

最新问答