title: failed signalR hub connection from TypeScript
body: <p>I'm attempting to initialize a connection with the Core 3.1 SignalR Hub from TypeScript. However, my front end <code>/negotiate</code> request is pending for quite some time before it finally fails.</p>
  <p>My Angular service is notification.service.ts -</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import * as signalr from '@microsoft/signalr';
  
  @Injectable({
    providedIn: 'root'
  })
  export class NotificationService {
  
    private hubConnection: signalr.HubConnection;
  
    public startConnection = () =&gt; {
      this.hubConnection = new signalr.HubConnectionBuilder()
                              .withUrl('http://localhost:44311/hub')
                              .build();
  
      this.hubConnection
        .start()
        .then(() =&gt; console.log('Connection started'))
        .catch((err) =&gt; console.log(`Error while starting connection: ${err}`));
    }
    constructor() { }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>which is called as soon as I log into my application:</p>
  <p><code>this.notificationService.startConnection();</code></p>
  <p>On the Core 3.1 server side, I have the following code in my Startup.cs.
  fyi: I add the <code>/hub</code> route, and also configure CORS to accept requests from <code>localhost:4200</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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 =&gt;
              {
                  options.AddPolicy(name: MyAllowedSpecificOrigins,
                                    builder =&gt; {
                                        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 =&gt;
              {
                  endpoints.MapHub&lt;Notifications&gt;("/hub");      
                  endpoints.MapGet("/", async context =&gt;
                  {
                      await context.Response.WriteAsync("Hello Web World!");
                  });
              });
          }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>When I start my Core project, it runs in IIS under App URL <code>http://localhost:55883/</code>, as well as under SLL <code>https://localhost:44311/</code> .</p>
  <p><a href="https://i.stack.imgur.com/IIuMz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IIuMz.png" alt="enter image description here" /></a></p>
  <p>I can't seem to initialize the HUB connection, and can't figure out where my problem is:</p>
  <p><a href="https://i.stack.imgur.com/RDxkC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RDxkC.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/Lmove.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lmove.png" alt="enter image description here" /></a></p>
  <p>Request headers on the <code>negotiate</code> request:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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</code></pre>
  </div>
  </div>
  </p>
  <p>I appreciate any advice you are willing to provide on either the TypeScript or the C# side.</p>