Azure SignalR中React客户端自定义Header丢失问题求助

React客户端通过SignalR JS SDK连接Azure SignalR Service时，自定义Header在Hub的OnConnectedAsync方法中无法获取，但.NET/Node客户端、普通SignalR环境、长轮询模式下均正常。核心原因是：SignalR JS SDK默认用WebSocket传输时，自定义Header仅在初始握手请求中携带，而Azure SignalR Service作为中转服务，不会将这些Header转发到后端Hub的Context.GetHttpContext()中。

1. 用AccessToken携带自定义数据（推荐） #

把deviceId这类自定义数据放到JWT Token的Claims中，通过accessTokenFactory传递，服务器端从用户身份信息中读取：

客户端（React）修改 #

const getToken = async () => {
  // 从后端获取包含deviceId Claim的JWT Token
  const token = await fetch('/api/getToken', {
    method: 'POST',
    body: JSON.stringify({ deviceId })
  }).then(res => res.json());
  return token;
};

const connection = new HubConnectionBuilder()
  .withUrl(HUB_URL, {
    accessTokenFactory: () => getToken(),
  })
  .withAutomaticReconnect()
  .build();

服务器端Hub修改 #

public override Task OnConnectedAsync()
{
    const string claimDeviceIdKey = "deviceId";
    var deviceId = Context.User?.FindFirst(claimDeviceIdKey)?.Value;
    if (!string.IsNullOrEmpty(deviceId))
    {
        // 执行你的业务逻辑
    }
    return base.OnConnectedAsync();
}

2. 通过查询字符串传递数据 #

将自定义参数附加到连接URL的查询字符串中，Azure SignalR会自动把查询参数传递到Hub的Context里：

客户端（React）修改 #

const connectionUrl = new URL(HUB_URL);
if (deviceId) {
    connectionUrl.searchParams.append('deviceId', deviceId);
}

const connection = new HubConnectionBuilder()
  .withUrl(connectionUrl.toString(), {
    accessTokenFactory: () => getToken(),
  })
  .withAutomaticReconnect()
  .build();

服务器端Hub修改 #

public override Task OnConnectedAsync()
{
    const string queryDeviceIdKey = "deviceId";
    var deviceId = Context.GetHttpContext()?.Request.Query[queryDeviceIdKey].FirstOrDefault();
    if (!string.IsNullOrEmpty(deviceId))
    {
        // 执行你的业务逻辑
    }
    return base.OnConnectedAsync();
}

3. 强制使用长轮询（临时方案，不推荐） #

如果仅做临时验证，可强制客户端采用长轮询传输（会影响实时性和性能）：

const connection = new HubConnectionBuilder()
  .withUrl(HUB_URL, {
    accessTokenFactory: () => getToken(),
    headers: deviceId && { deviceId: deviceId },
    transport: HttpTransportType.LongPolling
  })
  .withAutomaticReconnect()
  .build();

• .NET/Node客户端的SignalR SDK在WebSocket模式下的Header处理逻辑与JS SDK不同，Azure SignalR对其有特殊兼容，所以能正常获取Header；
• 长轮询模式下每次请求都会携带Header，因此不会出现丢失问题，但该模式性能远不如WebSocket，仅适合临时调试。

内容的提问来源于stack exchange，提问作者Gentelam.S