如何*同时*将 ngrok 用于后端和前端？

Posted 2023-04-18

【中文标题】如何*同时*将 ngrok 用于后端和前端？

【英文标题】：How can I use ngrok for backend and frontend *at the same time*?

【发布时间】：2020-03-05 02:26:55

【问题描述】：

我有一个想要在移动设备中测试的 react 应用，但是 Chrome 或 Firefox 中的移动开发工具还不够。

后端在localhost:5000 上运行，前端在localhost:3000 上运行。

如果我同时运行ngrok http 3000 和ngrok http 5000 并使用ngrok http 3000 提供的链接，我可以访问我的前端，但是（可以理解）它可以与我的后端对话，因为它正在寻找localhost: 5000 服务器相对于我的手机，而不是查看ngrok http 5000 提供的链接。

我的问题是：

配置我的应用和 ngrok 以便我可以同时在我的计算机和手机上测试我的应用的最佳方式是什么？

有没有更好的方法可以完全不使用ngrok？

谢谢

【参考方案1】：

在您从 API 服务器进行配置的地方形成您的前端，将其替换为您的后端正在运行的 Ngrok URL，然后 Ngrok 您的前端，然后您可以从任何地方访问您的前端

【参考方案2】：

首先，您可以从您的开发服务器配置代理到后端。这将使您的前端能够从任何位置通过相对 URL（例如 /api 而不是 localhost:5000/api）访问后端。为了做到这一点，您应该将"proxy": "http://localhost:5000" 添加到您的package.json，然后确保您的后端请求与您的前端中的内容不匹配，最好使用前缀。更多详情here.

鉴于您仅在本地网络中测试应用程序，因此您不需要 ngrok，因为您可以通过手机的本地 IP 访问您的开发机器。要找到它，请运行 ifconfig 或 ipconfig 并在手机中输入返回的本地 IP（通常类似于 192.168.X.X），而不是 ngrok 提供的域。