.net 我可以同时为前端和后端安装ngrok吗?

jdzmm42g  于 2023-03-13  发布在  .NET
关注(0)|答案(3)|浏览(372)

我想同时为前端和后端设置ngrok,这是不可能的,因为我的前端在Angular 6上,后端在.net核心。
我实现ngrok时,前端和后端都在同一主机和端口上(都在.Net和MVC中),所以它们运行在同一端口上。
现在,我想知道是否有其他方法可以做到这一点。
我的Angular 6在http://localhost:4200/上运行后端在https://localhost:44343/上运行
如果有,请推荐我。

vi4fp9gy

vi4fp9gy1#

我发现了一个在后端和前端都使用隧道的解决方案,在ngrok.yml配置文件中定义它们。在Windows中,这个文件通常位于C:\Users\you\ .ngrok2\ngrok.yml。

authtoken: <your token is already here>
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: http
        addr: 1337

其中React.js的端口数为3000,Sails.js的端口数为1337。
要解除ngrok服务:ngrok start frontend backend
Ngrok将重定向两个端口,并提供两个地址而不是一个(总共四个,如果您考虑https的话)。
最后,我使用在ngrok CLI中找到的新URL更改了前端的API地址(您将通过查看端口号来识别它)。
我是在阅读类似的帖子(你可以找到here的详细信息)时找到这个解决方案的,我没有使用“子域”部分(只有在ngrok付费服务中才有)。

w1e3prcc

w1e3prcc2#

问得好!我也有类似的问题,我让我的后端在本地表现得像前端路径的代理服务器,这样它就可以将传入的前端请求路由到本地前端服务器。在Python中,使用Flask很容易,使用下面描述的代理方法:https://stackoverflow.com/a/36601467/38611

o8x7eapl

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来执行相同的操作。
这样我们就可以

const BASE_API_URL = '/api'; // previously 'http://localhost:5000'
fetch(BASE_API_URL, options);

运行在ngrok代理上的应用程序将调用/api,然后本地dev服务器将其转换为http://localhost:5000

相关问题