如何移除SignalR UI客户端连接中的Web API绝对路径？

方案1：在MVC项目中配置反向代理（推荐开发/生产通用） #

通过反向代理让MVC应用将SignalR请求转发到Web API，前端使用相对路径/MyHub即可，请求会自动路由到API端。

操作步骤： #

1. 在MVC项目中安装反向代理包：

Install-Package Yarp.ReverseProxy

2. 在MVC项目的appsettings.json中添加代理规则：

"ReverseProxy": {
  "Routes": {
    "signalrRoute": {
      "ClusterId": "signalrCluster",
      "Match": {
        "Path": "/MyHub/{**catch-all}"
      }
    }
  },
  "Clusters": {
    "signalrCluster": {
      "Destinations": {
        "apiServer": {
          "Address": "https://localhost:44000/" // 替换为你的Web API地址，生产环境可改为正式域名
        }
      }
    }
  }
}

3. 在MVC项目的Program.cs中注册并启用代理：

var builder = WebApplication.CreateBuilder(args);

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

// 常规MVC服务配置
builder.Services.AddControllersWithViews();

var app = builder.Build();

// 启用代理中间件（位置在UseRouting之后，UseEndpoints之前）
app.UseRouting();
app.MapReverseProxy();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

4. 前端JS保持相对路径配置：

var connection = new signalR.HubConnectionBuilder()
   .withUrl("/MyHub")
   .withAutomaticReconnect()
   .build();

方案2：从MVC配置中注入API基础地址 #

将Web API地址存入MVC配置文件，在视图中动态注入，避免前端硬编码。

操作步骤： #

1. 在MVC项目的appsettings.json中添加API配置项：

"ApiSettings": {
  "SignalRBaseUrl": "https://localhost:44000"
}

2. 在目标cshtml视图中直接读取配置并拼接路径：

@inject IConfiguration Configuration
<script>
    var connection = new signalR.HubConnectionBuilder()
       .withUrl('@Configuration["ApiSettings:SignalRBaseUrl"]/MyHub')
       .withAutomaticReconnect()
       .build();
</script>

也可通过Controller传递地址：

public IActionResult Index()
{
    ViewBag.SignalRBaseUrl = Configuration["ApiSettings:SignalRBaseUrl"];
    return View();
}

视图中使用：

<script>
    var connection = new signalR.HubConnectionBuilder()
       .withUrl('@ViewBag.SignalRBaseUrl/MyHub')
       .withAutomaticReconnect()
       .build();
</script>

方案3：生产环境同域名部署适配 #

若生产环境中Web API和MVC部署在同一域名下（比如API挂载在/api子路径），可修改API的Hub映射路径为/api/MyHub，前端直接使用/api/MyHub作为连接地址即可，无需额外代理配置。

注意事项： #

• 生产环境建议收紧Web API的CORS规则，不要使用SetIsOriginAllowed(hostName => true)，指定具体的MVC域名更安全。
• 反向代理方案会自动处理SignalR的WebSocket转发，无需额外配置。

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