Angular 8 with Signal R and Web API

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

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();
});
}
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Viswanatha Swamy6y ago
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();
        });
    }
}
0