无法从Reaction本地移动应用程序向本地主机后端发送HTTP请求 [英] Can't send HTTP requests to Localhost Backend from React Native Mobile App

问题描述

2022年第一天~！学习移动应用程序开发人员让人头疼。设置起来不可能有这么难。我已经损失了6个小时了。请帮帮忙！

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

• 在本地主机上运行的Node/Express后端API，在使用Postman/浏览器进行测试时运行良好
• 通过博览会制作并运行的默认Reaction原生应用程序。我在我的Android手机上通过读取世博/地铁提供的二维码来测试这款应用，该二维码通过隧道提供

所需行为：

• Reaction本机移动应用程序应该能够与后端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 Request From Reaction Native(缩写)

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

尝试的解决方案

• 将‘localhost’替换为10.0.2.2和127*的变体*
• 正在通过Expos(LAN或本地而不是隧道)连接，但无法连接(超时错误)
• 使用Ubuntu UFW防火墙设置(禁用、允许端口)
• 全部忽略，安装Android Studio进行仿真，但被告知我的设备不支持SVM或at-x硬件虚拟化，这让我陷入了另一个困境

推荐答案

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

当我运行ADB Reverse时，我使用了教程和stackfoverflow问题中使用的端口(因为通常这些都是默认值)。但是您需要使用您的后端API正在侦听的端口。

对于任何其他卡住的人，完整的指南是： 如果您的后端API正在监听‘localhost：5000’ 如果您的React原生应用程序在本地通过EXPO运行(它将显示Metro正在终端中侦听127*，如果设置为LAN，则显示10*) 然后在API请求中，将localhost替换为上面expo中列出的IP(127或10) 并在终端‘ADB REVERSE TCP：5000 TCP：5000’中

摘要：

1. ADB反转您的后端API正在监听的端口
2. 当您开始使用EXPO进行原生反应时，将本地主机替换为终端中Metro列出的IP

这篇关于无法从Reaction本地移动应用程序向本地主机后端发送HTTP请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！