浏览器无法连接Azure SignalR，React客户端报403/503错误但后端连接正常

503 Service Temporarily Unavailable 错误原因 #

Azure SignalR 服务为多租户共享架构，依赖请求域名区分不同租户的服务实例，直接访问 IP 地址无法路由到你专属的 SignalR 实例，因此必然返回503。后续所有请求都必须使用 Azure 分配给你的 SignalR 服务域名，禁止直接使用 IP 访问。

403 Forbidden 错误原因 #

按出现概率从高到低排列：

• 核心配置错误：前端不应该直接请求 Azure SignalR 的域名，正常的 Azure SignalR 工作流要求前端请求你自己的 ASP.NET Core 后端的 Hub 地址，由后端和 Azure SignalR 通信后自动完成重定向、鉴权，你直接请求 Azure 侧的域名缺少合法的访问凭据，自然返回403。
• 路径大小写不匹配：后端映射的 Hub 路径为 /SignalRTestHub，前端写的是全小写的 /signalrtesthub，SignalR 默认对路径大小写敏感，会直接拒绝不匹配的请求。
• 鉴权令牌无效：你的 SignalRTestHub 加了 [Authorize] 注解要求鉴权，但你代码里 accessTokenFactory 返回的是固定字符串 "token"，这个占位符没有任何有效鉴权信息，后端校验不通过就会返回403。
• 跳过协商的配置错误：你开启了 skipNegotiation: true 要求直接建立 WebSocket 连接，如果你确实需要跳过协商，必须提供 Azure SignalR 服务认可的有效 JWT 访问令牌，而不是你自有后端的鉴权令牌，否则会被 Azure 侧直接拦截返回403。
• 跨域配置缺失：后端没有配置 CORS 规则放行前端所在的域名，跨域预检请求被拦截也可能返回403。
• Azure 侧网络控制拦截：如果你在 Azure 门户的 SignalR 服务配置了 IP 白名单、私有访问等限制，没有把前端用户的访问 IP 加入允许列表，也会触发403。

修复示例 #

ASP.NET Core 后端新增配置 #

// 新增CORS配置，放在AddSignalR之前
services.AddCors(options =>
{
    options.AddPolicy("AllowSignalRClient", policy =>
    {
        policy.WithOrigins("你的React应用域名，比如http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

// 保留原有SignalR配置
services.AddSignalR()
    .AddAzureSignalR("ConnectionString");

// 中间件注册顺序要对， UseCors要放在UseEndpoints之前
app.UseCors("AllowSignalRClient");

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<SignalRTestHub>("/SignalRTestHub");
    endpoints.MapControllers();
});

React 端修改 #

const newConnection = new HubConnectionBuilder()
    // 这里填你自己的ASP.NET Core后端域名，不是Azure SignalR的域名，路径和后端保持大小写一致
   .withUrl(`https://<你自己的后端域名>/SignalRTestHub`, {
       // 如果没有特殊需求不要开启skipNegotiation，删掉该配置
       transport: HttpTransportType.WebSockets,
       accessTokenFactory: () => "这里填你实际获取到的有效JWT鉴权令牌，不要填占位符"
   })
   .configureLogging(LogLevel.Error)
   .withAutomaticReconnect()
   .build();

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