SignalR Javascript client CORS issue 'Access-Control-Allow-Origin' header in the response must not be the wildcard

[davenewza]

I are unable to connect to our SignalR hub, hosted on Azure App Service, using the JavaScript client found here: https://docs.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-2.1

Failed to load https://myapp.azurewebsites.net/location/negotiate: 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'. Origin 'null' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Startup.cs looks something like this:

    public IServiceProvider ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options => options.AddPolicy("CorsPolicy", builder =>
        {
            builder
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowAnyOrigin()
                .AllowCredentials();
        }));

        services
            .AddMvcCore()
            .AddJsonFormatters();

        services.AddSignalR();

        var provider = services.BuildServiceProvider();
        return provider;
    }

    public void Configure(IApplicationBuilder app)
    {
        app.UseCors("CorsPolicy");

        app.UseMvc();

        app.UseSignalR(routes =>
        {
            routes.MapHub<LocationsHub>("/location");
        });
    }

I am using the latest 2.1.0-preview2-final libraries.

Allowed origins is set to "*" in the Web App and websockets are enabled:

I am able to connect just fine to this hub using the C# client.

[davenewza]

I have set the Allowed Origins in the Azure Web App to http://localhost:12345

And specifying the origin in Startup.cs:

services.AddCors(options => options.AddPolicy("CorsPolicy", builder =>
{
    builder
        .AllowAnyMethod()
        .AllowAnyHeader()
        .WithOrigins("http://localhost:12345")
        .DisallowCredentials();
}));

And now the error:

Failed to load https://myapp.azurewebsites.net/location/negotiate: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400.

[analogrelay]

I think it might be because you have both the ASP.NET Core CORS feature and the Azure Web Apps CORS feature, and I think you probably haven't properly specified all the configuration options in the Azure one. Can you try removing all the settings from the Azure portal's CORS settings and try again? The fact that the response headers don't include Server: Kestrel makes me think that you're getting a response directly from the Azure Websites front-end and it's never reaching the application (The X-Powered-By: ASP.NET is provided by IIS too, so it doesn't indicate that the request is reaching the app either).

If that doesn't fix it, let me know and we can keep digging.

[analogrelay]

+@HaoK who's done some verification of SignalR and CORS.

[HaoK]

I'll take a look as well

@davenewza as a reference point, I got Cors working without Azure in the picture a few days ago using preview 2 bits with https://github.com/HaoK/Random/tree/master/SignalRStuff/CorsServer and https://github.com/HaoK/Random/tree/master/SignalRStuff/CorsClient

[davenewza]

@anurse I have deleted all settings from the Azure Web App CORS configuration and have reverted to my initial CORS configuration in Startup.cs (allow everything).

Now getting a 204 from the negotiate endpoint! And it appears to be delivered from Kestrel as well.

But this error still comes up in Chrome:

Failed to load https://myapp.azurewebsites.net/location/negotiate: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

[analogrelay]

Can you post your complete Startup.cs? It's very hard to tell from the snippets you have if things are ordered correctly, and some of your snippets have had conflicting CORS configurations.

[Maciejszuchta]

I'm experiencing the same issue.

Startup.cs looks like this
services.AddCors(o => o.AddPolicy("CorsPolicy", builder => { builder .AllowAnyMethod() .AllowAnyHeader() .WithOrigins("http://localhost:4200"); }));

And in my angular client app, which is hosted on localhost:4200

I do:

`const hubConnectuion = new HubConnection("http://localhost:54496/signalr");

hubConnectuion
  .start()
  .then(() => console.log('Connection started!'))
  .catch(err => console.log('Error while establishing connection'));`

And I'm still getting

[Maciejszuchta]

Ok looks like moving Cors configuration to Configure method in Startup.cs solved the problem:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseAuthentication();
app.UseMvcWithDefaultRoute();
app.UseCors(builder =>
{
builder.WithOrigins("http://localhost:4200")
.AllowAnyHeader().AllowAnyMethod().AllowCredentials();
});
app.UseSignalR(routes => routes.MapHub("/signalr"));
}

[analogrelay]

@Maciejszuchta In your earlier code, were you referencing the named policy CorsPolicy in your UseCors call? CORS allows you to configure multiple named policies, as well as an unnamed "default" policy. .UseCors() only applies the default policy. If you use services.AddCors(o => o.AddPolicy("Name", builder => ...)) you have to make sure you reference that policy in the middleware: app.UseCors("Name")

@davenewza are you still encountering this issue? We haven't had any update from you since my earlier request for your Startup.cs code.

[davenewza]

@anurse I can confirm that it is working now. I assumed that it was due to an update to the package on NPM, but I see there hasn't been a new version. We did remove all CORS settings from the Web App's configuration and our startup looks something as follows:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<CookiePolicyOptions>(options =>
        {
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = SameSiteMode.None;
        });

        services.AddCors(options => options.AddPolicy("CorsPolicy", builder =>
        {
            builder
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowAnyOrigin()
                .AllowCredentials();
        }));

        services.AddSignalR();
    }

    public void Configure(IApplicationBuilder app)
    {
        app.UseCookiePolicy();
        app.UseCors("CorsPolicy");
        app.UseSignalR(routes =>
        {
            routes.MapHub<DevicesHub>("/device");
        });
    }
}

[analogrelay]

Ok, sounds like maybe the Azure Web App CORS settings were conflicting with the ones in ASP.NET Core.

[pieperu]

I was experiencing the same issue after upgrading my server to the latest

<PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-rc1-final" />

due to having to upgrade my client package to

"@aspnet/signalr": "1.0.0-rc1-update1"

I can also confirm that removing all settings from the CORS section of my Azure API Service resolved the issue.