Cors with SignalR - solving the "The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' error

Question

I am working with Angular 2 and ASP.NET Core with SignalR.

I have the error shown below:

XMLHttpRequest cannot load http://localhost:55916/signalr//signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22event%22%7D%5D&_=1486394845411. 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 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

There is my app config:

   public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            var signingKey = new SymmetricSecurityKey(Encoding.ASCII.GetBytes(Configuration["data:secretKey"]));

            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();
                        

            app.UseCors(config =>
                 config.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin());

            app.UseWebSockets();
            app.UseSignalR("/signalr");

            app.UseMvc();
        }

I have also Angular 2 SignalR service witch

constructor(){
 //setups...

  this.connection = $.hubConnection(this.baseUrl + 'signalr/');
    this.proxy = this.connection.createHubProxy(this.proxyName);

    this.registerOnServerEvents();

    this.startConnection();
}

regiestering server events:

 private registerOnServerEvents(): void {
        this.proxy.on('FoodAdded', (data: any) => {
            debugger;
            this.foodchanged.emit(data);
        });

        this.proxy.on('FoodDeleted', (data: any) => {
            debugger;
            this.foodchanged.emit('this could be data');
        });

        this.proxy.on('FoodUpdated', (data: any) => {
            debugger;
            this.foodchanged.emit('this could be data');
        });

        this.proxy.on('SendMessage', (data: ChatMessage) => {
            debugger;
            console.log('received in SignalRService: ' + JSON.stringify(data));
            this.messageReceived.emit(data);
        });

        this.proxy.on('newCpuValue', (data: number) => {
            debugger;
            this.newCpuValue.emit(data);
        });
    }

The error begins at the beginning.

miechooy miechooy · Accepted Answer · 2017-04-25T09:03:57

I figured it out. While setting connection in client side I had to add

withCredentials

property to false

So the code looks like:

private startConnection(): void {
    this.connection.start({ withCredentials: false }).done((data: any) => {
        this.connectionEstablished.emit(true);
        this.connectionExists = true;
    }).fail((error: any) => this.connectionEstablished.emit(false));
}

Cors with SignalR - solving the "The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' error

3 Answers