Angular 8 with Signal R and Web API

Question

Hi Everyone,

 

We are trying to implement Signalr with Web API in Angular 8. The below are the code which we have implmented

 

Angular 8:

this._hubConnection = new signalR.HubConnectionBuilder()
.withUrl('http://localhost:50633/MessageHub')
.build();
}
private startConnection(): void {
this._hubConnection
.start()
.then(() => {
this.connectionIsEstablished = true;
console.log('Hub connection started');
this.connectionEstablished.emit(true);
})
.catch(err => {
console.log('Error while establishing connection, retrying...');
setTimeout(function () { this.startConnection(); }, 5000);
});
}

Web API code:

 

Web API Config: 

public static void Register(HttpConfiguration config)
{
// New code
//config.EnableCors();
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}

Start Up file:

app.Map("/signalr", map =>
{
// Setup the CORS middleware to run before SignalR.
// By default this will allow all origins. You can
// configure the set of origins and/or http verbs by
// providing a cors options with a different policy.
//map.UseCors(CorsOptions.AllowAll);
var hubConfiguration = new HubConfiguration
{
// You can enable JSONP by uncommenting line below.
// JSONP requests are insecure but some older browsers (and some
// versions of IE) require JSONP to work cross domain
EnableJSONP = true,
EnableJavaScriptProxies = true,
EnableDetailedErrors = true
};
// Run the SignalR pipeline. We're not using MapSignalR
// since this branch already runs under the "/signalr"
// path.
map.RunSignalR(hubConfiguration);
});
app.MapSignalR();

We are facing issue unable to establish a hubconnection. Can any one help to resolve the below issue.

Access to XMLHttpRequest at 'http://localhost:50633/MessageHub/negotiate' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

 

Thanks,

Venkatesh.P