Cors with SignalR - 解决响应中“'Access-Control-Allow-Origin'标头的值不能是通配符'*'错误答案

【问题标题】：Cors with SignalR - solving the "The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' errorCors with SignalR - 解决响应中“'Access-Control-Allow-Origin'标头的值不能是通配符'*'错误
【发布时间】：2017-06-23 14:53:29
【问题描述】：

我正在使用 Angular 2 和带有 SignalR 的 ASP.NET Core。

我的错误如下所示：

XMLHttpRequest 无法加载 http://localhost:55916/signalr//signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22event%22%7D%5D&_=1486394845411。响应中“Access-Control-Allow-Origin”标头的值当请求的凭证模式为 '包括'。因此，不允许使用 Origin 'http://localhost:8080' 使用权。发起请求的凭证模式 XMLHttpRequest 由 withCredentials 属性控制。

这是我的应用配置：

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

我也有 Angular 2 SignalR 服务女巫

constructor(){
 //setups...

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

    this.registerOnServerEvents();

    this.startConnection();
}

注册服务器事件：

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

错误从头开始。

【问题讨论】：

标签： angularjs asp.net-core signalr

【解决方案1】：

我想通了。在客户端设置连接时，我必须添加

有凭据

属性为假

所以代码看起来像：

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

【讨论】：

这是一个巨大的痛苦来源，在 MS 文档中被严重遗漏。你有没有发现微软在任何地方列出了 connection.start() 的所有重载？在许多示例中，他们只是显示允许 CORS 的所有“*”来源并保留它。这不是一个角度特定的问题，而是与 XMLHttpRequest 的任何使用有关。

【解决方案2】：

这对我有用

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

必须添加 AllowCredentials 选项

【讨论】：

这个组合为我生成：The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time. Configure the CORS policy by listing individual origins if credentials needs to be supported.

【解决方案3】：

只要在您的应用程序中使用凭据安全性，您就应该指定 CORS 请求可能会从哪些域到达您的服务器：

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

如果您允许来自世界上任何域的 CORS 请求，则凭据安全性的价值会大大降低。这就是错误信息告诉我们的内容。

【讨论】：

你知道如何通过通配符支持来做到这一点