如何连接我的reactjs前端和ASP.NET Core后端上的ngrok?

pkln4tw6  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(125)

我是新手,我正在尝试连接我的前端和后端,以便它可以接收和发送数据。但我好像不能让它工作。
这是launchsettings代码。json on backend:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:56440",
      "sslPort": 44385
    }
  },
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "WebAPIv1._1": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000"
    }
  }
}

而这是代理的代码。js in frontend:

const { createProxyMiddleware } = require("http-proxy-middleware");
import * as Path from "../Productivity/state/apiRoutes";

module.exports = app =>{
    app.use(
        createProxyMiddleware('/department',
        {
            target : 'https://localhost:44385/api',
            changeOrigin : true
        })
    )

}

我需要做什么才能让前端和后端都在ngrok上运行?
我尝试了通过打开ngrok连接前端和后端。yml并将里面的代码改为:

version: "2"
authtoken: 
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: http
        addr: 44385

ngrok上的run ngrok start frontend backend。exe
我可以从ngrok打开前端URL,当我尝试登录到网站应用程序时会出现错误,因为它无法连接到后端,然后我从ngrok在后端URL上获得ERR_NGROK_3004。
感谢任何帮助!

7rtdyuoh

7rtdyuoh1#

你的申请在哪里?Kestrel还是IIS?launchsettings.json文件仅适用于Visual Studio或其他编译器,如果您的项目是通过Kestrel启动的,则需要添加以下代码。

builder.WebHost.UseUrls("http://0.0.0.0:5000");

在我的示例中,您可以发现我使用5031,您需要更改为5000。

建议

1.在visual studio中选择WebAPIv1._1,然后启动。
1.我还没试过使用Ngrok。yml,所以建议你使用命令来暴露后端应用程序端口。通过使用

ngrok http 5000

1.您可以像下面这样更改设置

"WebAPIv1._1": {
 "commandName": "Project",
 "launchBrowser": true,
 "launchUrl": "swagger",
 "environmentVariables": {
   "ASPNETCORE_ENVIRONMENT": "Development"
 },
 "applicationUrl": "https://localhost:5001;http://localhost:5000"
}

1.更改targetUrl,如下所示

module.exports = app =>{
    app.use(
        createProxyMiddleware('/department',
        {
            target : 'https://fd78-167-220-255-54.ngrok-free.app/api',
            changeOrigin : true
        })
    )

}

相关问题