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

Viswanatha Swamy · Answer

Hello Venkatesh, Good afternoon. Below is the code which I have implemented in .Net core 3.1. I see two pieces in the equation. 1. We need to configure, and 2. We need to inform the framework to use it. Many thanks. Step 1: // CORS services.AddCors(options => { options.AddPolicy(name: AllowSpecificOrigins, builder => { builder.WithOrigins(LocalApplicationAddress, ApimApplicationAddress); }); }); Step 2: app.UseCors(AllowSpecificOrigins); public class Startup { const string AllowSpecificOrigins = "onlyFromMyPC" ; const string LocalApplicationAddress = "https://localhost:44392" ; const string ApimApplicationAddress = "https://weather-forecast-apimgw.azure-api.net" ; public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get ; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { // CORS services.AddCors(options => { options.AddPolicy(name: AllowSpecificOrigins, builder => { builder.WithOrigins(LocalApplicationAddress, ApimApplicationAddress); }); }); // Controllers services.AddControllers(); // Adding EF Core var connectionString = Configuration[Constants.ConnectionString]; services.AddDbContext (o => o.UseSqlServer(connectionString)); // Application Services services.AddScoped (); services.AddScoped (); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseRouting(); app.UseCors(AllowSpecificOrigins); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); }); } }