JavaScript SignalR客户端无法连接Azure SignalR服务的问题咨询

• 客户端路径配置错误：C# 后端MapHub注册的路径为/myHub，但JS端错误使用了/client/?hub=myHub格式的路径，该格式是Azure SignalR内部的请求格式，不适合直接用来配置客户端连接地址。
• 直接连接Azure SignalR公网地址的逻辑错误：Azure SignalR的客户端连接需要先经过你自己的后端服务进行协商（negotiate）获取合法的认证token和重定向地址，不能直接在JS里填写Azure SignalR的服务地址发起连接，缺少认证信息会直接返回400错误。
• 后端配置缺失：如果仅配置了app.UseAzureSignalR，没有在ConfigureServices中注册AddAzureSignalR服务、或者没有正确配置Azure SignalR的连接字符串，也会导致协商接口报错。
• 跨域配置异常：如果前端运行地址和后端接口地址域名/端口不一致，未正确配置CORS规则也会导致协商请求被拦截返回400。

• 修正JS端连接配置，直接填写后端注册的Hub路径即可，修改后的代码如下：

var connection = new signalR.HubConnectionBuilder()
                .configureLogging(signalR.LogLevel.Debug)
                .withUrl("/myHub")
                .withAutomaticReconnect().build();

• 补全后端配置，首先在appsettings.json中添加Azure SignalR的连接字符串配置：

{
  "Azure": {
    "SignalR": {
      "ConnectionString": "你从Azure门户复制的SignalR服务连接字符串"
    }
  }
}

然后在Startup.cs的ConfigureServices方法中添加服务注册：

services.AddSignalR().AddAzureSignalR();

• 排查跨域配置，如果前端和后端地址不一致，在ConfigureServices中添加CORS规则：

services.AddCors(options =>
{
    options.AddPolicy("AllowSignalR", policy =>
    {
        policy.WithOrigins("你的前端运行地址，比如https://localhost:44324")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

并在Configure方法中，把CORS中间件放在UseRouting之后、UseAuthorization和UseAzureSignalR之前：

app.UseRouting();
app.UseCors("AllowSignalR");
app.UseAuthorization();
app.UseAzureSignalR(routes =>
{
    routes.MapHub<MyHub>("/myHub");
});

• 检查Azure SignalR服务配置：登录Azure门户确认SignalR服务处于运行状态，没有配置IP防火墙规则拦截你本地的请求IP。
• 开启后端调试日志，查看协商请求返回400时的具体错误信息，定位是Hub类定义错误还是连接字符串无效等具体问题。

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