Azure SignalR Service in .net core app deployed in Azure Kubernetes Service with Angular front end is throwing Error: WebSocket failed to connect

Question

I am trying to run .net core application with Azure SignalR services(free tier). The .net core app is deployed in Azure Kubernetes Service. I have an Angular frontend app that tries to connect to the WebSocket. Below are my configurations in Program.cs file:

    services.AddCors(options => options.AddPolicy("testing", builder =>
    {
        builder.WithOrigins("https://somebackendserver.com");
        builder.AllowCredentials();
        builder.AllowAnyHeader();
        builder.AllowAnyMethod();
    })); 
    services.AddSignalR(options =>
    {
        options.EnableDetailedErrors = true;
    }).AddAzureSignalR(connectionStringSignalR);


app.UseCors("testing");
app.UseEndpoints(configure =>
{
    configure.MapHub<GenerationNotificationHub>("/hub");
});

This is my Angular side code to create a connection:

public createConnection = (): void => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .configureLogging(signalR.LogLevel.Error)
      .withUrl(`https://somebackendserver.com/hub`,
        {
          accessTokenFactory: () => this.sessionService.get(SignalrNotificationService.accessTokenStorageKey),
          transport: signalR.HttpTransportType.WebSockets,
          skipNegotiation: true
        })
      .withAutomaticReconnect()
      .build();

    this.hubConnection.start().then().catch();
  }

When the solutions are deployed in AKS I get the following error in browser console window:

Error: Failed to start the connection: Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.

This is the server-side error log

Failed to connect to '(Primary)https://xxx.service.signalr.net(hub=GenerationNotificationHub)', will retry after the back off period. Error detail: Unable to connect to the remote server. Received an unexpected EOF or 0 bytes from the transport stream.. Id: 958c67ab-1e91-4983-83ad-bfaf02bc48da

And this is the Postman error when I try to connect to the WebSocket:

Status Code: 503 WebSocket request made to a site where WebSockets are disabled. Request Headers Sec-WebSocket-Version: 13 Sec-WebSocket-Key: AjiVAXGSpcYCbiGbftHbcg== Connection: Upgrade Upgrade: websocket Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits Host: somebackendserver.com Response Headers Content-Length: 27 Content-Type: text/html Date: Mon, 19 Sep 2022 13:44:16 GMT Server: Microsoft-IIS/10.0

The application works fine when I try to run it on localhost but something seems off when I deploy it as Kubernetes service in Azure.

EDIT: We have a Kong API Gateway for managing our API Gateway services, and I am suspecting it is somehow blocking SignalR websocket network connections. I keep getting this CORS error

Access to fetch at >'https://api.XXX.dev.XXXXXX.com/hub/generation/negotiate?negotiateVersion=1' from origin 'https://XXXX.dev.XXXXXX.com' has been >blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value >'https://portal.api.dev.XXXX.com' that is not equal to the supplied >origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' >to fetch the resource with CORS disabled.

Answer 1

I was able to figure out what went wrong here. We are using Kong API gateway 2.7.1 for our organization. This version of Kong does not support WS/WSS protocol. This explains the errors like:

Status Code: 503 WebSocket request made to a site where WebSockets are disabled.

Or

Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets

Another clue was that SignalR WebSockets was working on my local machine but not on the Cloud.

From Kong 3.0 Enterprise onwards, we have WebSocket support. I hope this helps.