SignalR Error: Failed to start the connection: Error: None of the transports supported by the client are supported by the server

Question

I am trying to use SignalR in my .NET CORE 3.1 webapi(server) and angular 10(client) project. API (https://localhost:44305/api) and client angular (https://localhost:44305/user/signup) project shares same domain. This is how I have setup signalR in the server side:

1. I have created Hub class
   

   using Microsoft.AspNetCore.SignalR;
   namespace Web.Hubs
   {
       public class ResponseHub : Hub
       {
       }
   }
   

2. In Startup.cs class, added services.AddSignalR() in the ConfigureService method. And Enabled CORS like :
   

               services.AddCors(options =>{
                   options.AddPolicy(MyAllowSpecificOrigins,
                   builder =>
                   {
                       builder
                       .WithOrigins(Configuration.GetValue<string>("https://localhost:44305"))
                       .AllowAnyHeader()
                       .AllowAnyMethod()
                       .AllowCredentials();
                   });
               });
   

   
   And added following lines in configure method :
   

   app.UseEndpoints(endpoints =>
              {
   
                  endpoints.MapControllerRoute(
                      name: "default",
                      pattern: "{controller}/{action=Index}/{id?}");
                  endpoints.MapHub<ResponseHub>("/userdetails/response");
              });
   

In the client side,

1. I have installed "@microsoft/signalr": "^3.1.9" package in the angular project.

2. created service for the signalR like :

   import { Injectable } from "@angular/core";
   import { Signalrresponse } from "./signalrresponse";
   import { Router } from "@angular/router";
   import * as signalR from '@microsoft/signalr'; 
   
   @Injectable({
       providedIn: 'root'
   })
   export class SignalRService{
       constructor(private router: Router){}
    public data : Signalrresponse;
    private hubConnection: signalR.HubConnection
       public startConnection = () =>{
           this.hubConnection = new signalR.HubConnectionBuilder()
                                   .withUrl("https://localhost:44305/api/userdetails/response")
                                   .build();
           this.hubConnection
               .start()
               .then(() => console.log("Connection Started"))
               .catch(err => console.log('Error while starting connection: ' + err))
       }
   
       public addTransferChartDataListener = () =>{
           this.hubConnection.on('changestatus',(data)=>{
               console.log("Received data");
               this.data = data;
           })
       }
   }
   
   

I am getting an error while trying to establish a connection from the client side. Error message:

Error: Failed to start the connection: Error: None of the transports supported by the client are supported by the server.

How can I fix this?