Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 560
miechooy Avatar asked Feb 06 '17 15:02

miechooy


People also ask

How do I turn off client SignalR?

SignalR version 2 does not have a built-in server API for disconnecting clients. There are plans for adding this functionality in the future. In the current SignalR release, the simplest way to disconnect a client from the server is to implement a disconnect method on the client and call that method from the server.

How many connections can SignalR handle?

In the default mode, the app server creates five server connections with Azure SignalR Service. The app server uses the Azure SignalR Service SDK by default. In the following performance test results, server connections are increased to 15 (or more for broadcasting and sending a message to a big group).


1 Answers

As long as credentials security is used in your application you should specify domain(s) from which CORS requests may come to your server:

app.UseCors(config => config.WithOrigins("http://localhost:8080"));

Value of credentials security is greatly reduced if you're allowing CORS requests from any domain in the world. That is what error message telling us.

like image 116
Nikita Avatar answered Sep 17 '22 12:09

Nikita