无法从 React Native 移动应用程序向本地主机后端发送 HTTP 请求

Question

2022年第一天~！学习移动应用程序开发令人头疼。设置不会这么困难。我已经失去了 6 个小时。请帮忙！

情况我的开发环境运行s 在 Ubuntu 中，通过托管在 Windows 10 上的 VMWare。在这个环境中，我有：

a Node/express 后端 API 运行在本地主机上使用 Postman/browser
通过 Expo 制作了默认的 React 本机应用程序并运行。我通过读取 Expo/metro 提供的 QR 码从我的 Android phone 测试这个应用程序，通过 Tunnel

期望的行为：

React Native 移动应用程序应该能够与后端通信API

错误：

Network Error
at node_modules/axios/lib/core/createError.js:15:17 in createError
at node_modules/axios/lib/adapters/xhr.js:114:22 in handleError
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:609:10 in setReadyState
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:396:6 in __didCompleteResponse
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit

Axios Post 来自 React Native 的请求（缩写）

axios.post('http://localhost:5000/user/login', some-data)

尝试的解决方案

用 10.0.2.2 和 127*
正在通过 Expos（LAN 或本地而不是隧道）连接但无法连接（超时错误）
使用 Ubuntu ufw 防火墙设置（禁用，允许端口）
通过安装 Android Studio 来模拟，但被告知我的设备不支持 SVM 或 at-x 硬件虚拟化，这让我陷入了另一个困境

Answer 1

像 192.xxx.xx.xx 这样使用本地 ip 可以解决 localhost 无法工作的问题

Answer 2

所以我意识到我做错了什么。

当我运行 adb reverse 我使用了在教程和 stackfoverflow 问题中使用的端口（因为这些通常是默认值）。但是你需要使用后端 API 监听的端口。

对于其他卡住的人，完整指南是：如果您的后端 API 正在监听 'localhost:5000' 如果你的 React Native 应用程序是运行 via expo on Local（它会说 Metro 正在终端中监听 127*，如果设置为 LAN，则为 10*）然后在 API 请求中将 localhost 替换为上面 expo 中列出的 IP（127 或 10）在终端 'adb reverse tcp:5000 tcp:5000'

总结：

adb 反转您的后端 api 正在侦听的端口
当你开始 react native with expo 时，将 localhost 换成终端中 Metro 列出的 ip

无法从 React Native 移动应用程序向本地主机后端发送 HTTP 请求

Can't send HTTP requests to Localhost Backend from React Native Mobile App

android

node.js

mobile-development

react-native

expo