Azure SignalR missing custom headers

Question

I am using Azure SignalR for my .NET project as Hub.

On the other side, I am using a React app as a client. In the script, I add some custom headers to the HubConnectionBuilder class. When the connection client<-> hub is being established, the headers are gone. The custom headers disappear when reaching the server so when I am trying to get some data from the headers in the OnConnectedAsync method on Hub side, it occurs they are not there.

Worth to mention:

• Everything works if as a client I am using a .NET app or Node script

• When using normal SignalR (not as an Azure resource) everything works again.

• It seems to work if forcing the React app to use long-pooling

• change the Service Mode in Azure SignalR resource

• add different headers in different ways

• use different server SignalR options

Client (React) code:

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

connection.start()

Hub Code

 public override Task OnConnectedAsync()
{
   const string headerDeviceIdKey = "deviceId";

   var headers = Context.GetHttpContext().Request.Headers;

   if (headers.ContainsKey(headerDeviceIdKey))
   {
       //...
   }
   return base.OnConnectedAsync();
}

Edit:

• v1. The .NET app is hosted on Azure but the issues appears the same when running the app loccaly iand being connected to Azure resources.

Answer 1

Dictionary of headers sent with every HTTP request. Sending headers in the browser doesn't work for WebSockets or the ServerSentEvents stream.

Official document: Configure additional options

Reason

1.This is a limitation of the browser and not something SignalR can fix.

2.SignalR typescript client fails to add custom headers