failed signalR hub connection from TypeScript

Question

I'm attempting to initialize a connection with the Core 3.1 SignalR Hub from TypeScript. However, my front end /negotiate request is pending for quite some time before it finally fails.

My Angular service is notification.service.ts -

import { Injectable } from '@angular/core';
import * as signalr from '@microsoft/signalr';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  private hubConnection: signalr.HubConnection;

  public startConnection = () => {
    this.hubConnection = new signalr.HubConnectionBuilder()
                            .withUrl('http://localhost:44311/hub')
                            .build();

    this.hubConnection
      .start()
      .then(() => console.log('Connection started'))
      .catch((err) => console.log(`Error while starting connection: ${err}`));
  }
  constructor() { }
}

which is called as soon as I log into my application:

this.notificationService.startConnection();

On the Core 3.1 server side, I have the following code in my Startup.cs. fyi: I add the /hub route, and also configure CORS to accept requests from localhost:4200

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using NotificationHub.Hubs;
namespace NotificationHub
{
    public class Startup
    {
        readonly string MyAllowedSpecificOrigins = "_myAllowedSpecificOrigins";

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy(name: MyAllowedSpecificOrigins,
                                  builder => {
                                      builder.WithOrigins("https://localhost:4200");                                                                          
                                  }
                                  );
            });
            services.AddSignalR();
        }

        
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseHttpsRedirection();
            app.UseRouting();
            app.UseCors(MyAllowedSpecificOrigins);

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapHub<Notifications>("/hub");      
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello Web World!");
                });
            });
        }
    }
}

When I start my Core project, it runs in IIS under App URL http://localhost:55883/, as well as under SLL https://localhost:44311/ .

I can't seem to initialize the HUB connection, and can't figure out where my problem is:

Request headers on the negotiate request:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,es-CO;q=0.8,es;q=0.7
Access-Control-Request-Headers: x-requested-with
Access-Control-Request-Method: POST
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:44311
Origin: http://localhost:4200

I appreciate any advice you are willing to provide on either the TypeScript or the C# side.

Answer 1

You need to change the url on the front-end to https like:

import { Injectable } from '@angular/core';
import * as signalr from '@microsoft/signalr';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  private hubConnection: signalr.HubConnection;

  public startConnection = () => {
    this.hubConnection = new signalr.HubConnectionBuilder()
                            .withUrl('https://localhost:44311/hub')
                            .build();

    this.hubConnection
      .start()
      .then(() => console.log('Connection started'))
      .catch((err) => console.log(`Error while starting connection: ${err}`));
  }
  constructor() { }
}

Then on the server side just implement the CORS correctly:

services.AddCors(options =>
{
    options.AddPolicy(CorsPolicy, builder => builder.WithOrigins("http://localhost:4200")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
        .SetIsOriginAllowed((host) => true));
});