來自 React Native axios 調用 Node.js 的網絡錯誤

Question

我正在嘗試從我的 React Native 應用程序進行 Axios 調用，但出現以下錯誤：

這是我正在使用的代碼片段。 這是基於我嘗試過的 axios 教程，該教程有效，但不是獲取 'response.data'，我只是想獲取 'response.message' 以查看它是否實際連接。

僅供參考，我使用 Node.js 和 Express 創建了我的 API。

Answer 1

我相信您已經在開發中運行這兩個應用程序，如果這是真的，那么從手機訪問在您的計算機上運行的本地 API 幾乎沒有問題。

解決方案1

1. 將您的手機和筆記本電腦連接到同一個 wifi 網絡或熱點
2. 獲取你電腦的ip地址例如195.938.84.4你可以瀏覽如何在你的機器上獲取ip地址
3. 把你得到的 ip 地址放到你的代碼上的 API 調用 URL 中，你的代碼變成了http://195.938.84.4:8000

因為您的手機和計算機連接在同一網絡上，這意味着它們可以使用彼此的 IP 地址在該網絡上找到彼此。

解決方案2

您可以嘗試使用chrome 端口轉發

1. 確保您的手機使用 USB 電纜連接到您的計算機，並確保您運行命令adb reverse tcp:8081 tcp:8081並且它運行成功
2. 在 url 輸入上打開 chrome 瀏覽器並輸入chrome://inspect
3. 單擊端口轉發選項和端口輸入字段並輸入8000 ，這是您的 API 在您的 PC 上運行的端口，在端口和地址輸入字段中輸入localhost:8000，然后單擊完成。
4. 單擊配置和IP 地址和端口輸入字段輸入localhost:8000並按完成
5. 將代碼上的 url 更改為http://localhost:8000
6. 要在使用手機之前測試您的 api，只需在您的快速服務器上編寫一個虛擬路由，創建一個GET 請求路由/test並使用 json 響應進行響應，然后打開您的 chrome 瀏覽器並將請求發送到 http://localhost:8000/test。 如果它有效，那么這意味着你的 react-native 應用程序現在可以訪問你的本地 API，如果它不起作用，請再次刷新或查看步驟。