CORS policy issue with angular 7 and ASP.NET core 2.2 using SIGNAL R

Question

My friend and I are running into CORS trouble with our API and angular client. We are trying to establish a link, we are using signalR and the client(Angular 7) registers himself to receive messages from server(ASP .NET core 2.2).

In the browser console, I'm receiving this message :

Access to XMLHttpRequest at ' https://ourEndpoint/CoordinatorHub/negotiate ' from origin ' http://localhost:4200 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Server side

Our startup.cs looks like this, we have followed microsoft docs

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    services.AddDbContext<OneRoomContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("OneRoomContext")));
    services.AddSignalR();
    // Register the Swagger services
    services.AddSwaggerDocument();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseDeveloperExceptionPage();
    app.UseCors(builder =>
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader()
               .AllowCredentials());
    //if (env.IsDevelopment())
    //{
    //    app.UseDeveloperExceptionPage();
    //    app.UseCors(builder =>
    //        builder.AllowAnyOrigin()
    //               .AllowAnyMethod()
    //               .AllowAnyHeader());
    //}
    //else
    //{
    //    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    //    app.UseHsts();
    //}
    app.UseSignalR(route =>
    {
        route.MapHub<CoordinatorHub>("/CoordinatorHub");
    });
    app.UseHttpsRedirection();
    app.UseMvc();
    // Register the Swagger generator and the Swagger UI middlewares
    app.UseSwagger();
    app.UseSwaggerUi3();
}

And this is our controller :

using Microsoft.AspNetCore.SignalR;
using oneroom_api.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace oneroom_api.SignalR
{
    public class CoordinatorHub : Hub
    {
        public Task SendNewUser(User user)
        {
            return Clients.All.SendAsync("GetNewUser", user);
        }
    }
}

Azure portal : CORS allowed * origins

Client side

This is how our app.component.ts looks like (ngOnInit)

We are using @aspnet/signalr package

this.hubConnection = new signalR.HubConnectionBuilder()
    .withUrl(localStorage.getItem('endpoint') + '/CoordinatorHub')
    .build();

this.hubConnection.on('send', data => {
  console.log(data);
});

this.hubConnection.start().then(() => this.hubConnection.invoke('send', 'Hello'));

How to disable credentials mode or where do I need to give the withCredentials status ?

Thank you for your time and answers

Answer 1

As the error message already states, you need to explictly specify the allowed CORS origins.

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

You could of course try to make SignalR stop making a request that requires your API to send a Access-Control-Allow-Credentials header, depending on how you intend to handle authentication (cookies or bearer token?). How ever this is much more complicated than simply extending the "allowed origin" list. Besides that, you really should avoid using wildcards for the origin, especially on production systems.

For local development it is sufficient to add the address of your development server to the list of allowed origins. The list must be extended for each address you want the application to be reachable under.

 app.UseCors(builder =>
    builder.WithOrigins("http://localhost:4200")
           .AllowAnyMethod()
           .AllowAnyHeader()
           .AllowCredentials());

In addition to the code changes, you must remove the wildcard CORS entry from your Azure App Service configuration. Otherwise the changes would have no effect, because the CORS header would get overwritten by Azure.

Answer 2

Basically the problem was the CORS on azure overwrote the code in our startup.cs, we ended up removing the configuration CORS on our azure portal and everything works. We have used signal R npm package with angular since the old signalR-client is deprecated.