訪問本地主機 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