我想同时为前端和后端设置ngrok,这是不可能的,因为我的前端在Angular 6上,后端在.net核心。
我实现ngrok时,前端和后端都在同一主机和端口上(都在.Net和MVC中),所以它们运行在同一端口上。
现在,我想知道是否有其他方法可以做到这一点。
我的Angular 6在http://localhost:4200/上运行后端在https://localhost:44343/上运行
如果有,请推荐我。
我想同时为前端和后端设置ngrok,这是不可能的,因为我的前端在Angular 6上,后端在.net核心。
我实现ngrok时,前端和后端都在同一主机和端口上(都在.Net和MVC中),所以它们运行在同一端口上。
现在,我想知道是否有其他方法可以做到这一点。
我的Angular 6在http://localhost:4200/上运行后端在https://localhost:44343/上运行
如果有,请推荐我。
3条答案
按热度按时间vi4fp9gy1#
我发现了一个在后端和前端都使用隧道的解决方案,在
ngrok.yml
配置文件中定义它们。在Windows中,这个文件通常位于C:\Users\you\ .ngrok2\ngrok.yml。其中React.js的端口数为3000,Sails.js的端口数为1337。
要解除ngrok服务:
ngrok start frontend backend
Ngrok将重定向两个端口,并提供两个地址而不是一个(总共四个,如果您考虑https的话)。
最后,我使用在ngrok CLI中找到的新URL更改了前端的API地址(您将通过查看端口号来识别它)。
我是在阅读类似的帖子(你可以找到here的详细信息)时找到这个解决方案的,我没有使用“子域”部分(只有在ngrok付费服务中才有)。
w1e3prcc2#
问得好!我也有类似的问题,我让我的后端在本地表现得像前端路径的代理服务器,这样它就可以将传入的前端请求路由到本地前端服务器。在Python中,使用Flask很容易,使用下面描述的代理方法:https://stackoverflow.com/a/36601467/38611
o8x7eapl3#
另一种解决方案是将前端API调用代理到相对URL,如
/api
。@Yuro-Fedotov解释了如何在this post中为React应用执行此操作,该解决方案不要求您在每次创建新ngrok示例时将API地址更改为ngrok URL:首先,您可以配置从开发服务器到后端的代理,这将使您的前端能够通过相对URL访问后端(例如
/api
而不是localhost:5000/api
)。为了做到这一点,您应该将"proxy": "http://localhost:5000"
添加到您的package.json
中,然后确保您的后端请求与您前端中的请求不匹配,最好使用前缀。更多细节here。或者,如果您正在使用webpack,则可以设置devServer.proxy来执行相同的操作。
这样我们就可以
运行在ngrok代理上的应用程序将调用
/api
,然后本地dev服务器将其转换为http://localhost:5000
。