如何在Blazor Server客户端访问服务器本地应用且不暴露公网IP？

可以通过反向代理实现需求，让Blazor Server作为中间层转发请求，既不暴露本地应用的公网端口，又能通过公网访问渲染内容。以下是两种可行方案：

方案一：使用ASP.NET Core反向代理中间件（YARP） #

Blazor Server本身基于ASP.NET Core，集成YARP（微软官方反向代理工具）最为便捷。

步骤1：安装YARP包 #

在Blazor Server项目根目录执行命令：

dotnet add package Yarp.ReverseProxy

步骤2：配置代理规则 #

在appsettings.json中添加反向代理路由与集群配置：

"ReverseProxy": {
  "Routes": {
    "app1-route": {
      "ClusterId": "app1-cluster",
      "Match": {
        "Path": "/app1/{**catch-all}"
      }
    },
    "app2-route": {
      "ClusterId": "app2-cluster",
      "Match": {
        "Path": "/app2/{**catch-all}"
      }
    },
    "app3-route": {
      "ClusterId": "app3-cluster",
      "Match": {
        "Path": "/app3/{**catch-all}"
      }
    }
  },
  "Clusters": {
    "app1-cluster": {
      "Destinations": {
        "app1-dest": {
          "Address": "http://localhost:8080/"
        }
      }
    },
    "app2-cluster": {
      "Destinations": {
        "app2-dest": {
          "Address": "http://localhost:3040/"
        }
      }
    },
    "app3-cluster": {
      "Destinations": {
        "app3-dest": {
          "Address": "http://localhost:5510/"
        }
      }
    }
  }
}

步骤3：启用YARP代理 #

修改Program.cs，注册并启用反向代理：

var builder = WebApplication.CreateBuilder(args);

// 注册YARP代理服务
builder.Services.AddReverseProxy()
    .LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"));

// 原有Blazor服务注册
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var app = builder.Build();

// 中间件配置
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

// 启用代理路由
app.MapReverseProxy();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

步骤4：修改Blazor页面的iframe #

将iframe的src改为代理后的路径：

@page "/web-apps"

<PageTitle>Web Apps</PageTitle>

<iframe src="/app1" width="100%" height="600px" frameborder="0"></iframe>
<iframe src="/app2" width="100%" height="600px" frameborder="0"></iframe>
<iframe src="/app3" width="100%" height="600px" frameborder="0"></iframe>

方案二：使用Nginx反向代理 #

如果服务器已部署Nginx，可通过Nginx配置实现转发。

修改Nginx配置 #

在Nginx的server块中添加代理规则：

server {
    listen 80;
    server_name 你的公网IP或域名;

    # 代理Blazor Server主应用
    location / {
        proxy_pass http://localhost:你的Blazor端口;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # 代理本地应用1
    location /app1/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 代理本地应用2
    location /app2/ {
        proxy_pass http://localhost:3040/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 代理本地应用3
    location /app3/ {
        proxy_pass http://localhost:5510/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

重启Nginx #

执行命令使配置生效：

sudo nginx -s reload

修改Blazor页面iframe #

与方案一相同，将src改为/app1、/app2等路径即可。

原理说明 #

两种方案均通过服务器端反向代理实现：用户浏览器请求Blazor Server的公网路径，服务器内部将请求转发到本地localhost端口的应用，再把响应返回给用户。本地应用始终仅监听localhost，不会暴露到公网，完全符合需求。

内容的提问来源于stack exchange，提问作者wiki