使用SIGNAL R的角7和ASP. NET核心2.2的CORS策略问题

Question

我和我的朋友在我们的应用编程接口和角客户端上遇到了CORS问题。我们试图建立一个链接，我们正在使用SignalR和客户端（Angular 7）注册自己来接收来自服务器（ASP）的消息。NET核心2.2）。

在浏览器控制台中，我收到以下消息：

CORS策略阻止了对来自http://localhost:4200的https：//ourEndpoint/坐标中心/谈判的XMLHttpRequest的访问：对飞行前请求的响应不通过权限改造检查：响应中的访问控制允许起源标头的值不得为当请求的凭据模式为包含时，通配符为*。由XMLHttpRequest发起的请求的凭据模式由with Creentials属性控制。

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

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

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

Answer 1

基本上，问题是azure上的CORS在我们启动时重写了代码。cs，我们最终删除了azure门户上的配置COR，一切正常。由于旧的signal R客户端已被弃用，我们已将signal R npm包与angular一起使用。

Answer 2

由于错误消息已经指出，您需要明确指定允许的CORS来源。

当请求的凭据模式为“包括”时，响应中的“访问控制允许来源”标头的值不得为通配符“*”。

当然，您可以尝试让signar停止发出要求您的API发送访问控制允许凭证头的请求，这取决于您打算如何处理身份验证（cookie或承载令牌？）。然而，这比简单地扩展“允许的原产地”列表要复杂得多。除此之外，您确实应该避免对源代码使用通配符，尤其是在生产系统上。

对于本地开发，将开发服务器的地址添加到允许的源列表中就足够了。列表必须扩展到您希望应用html" target="_blank">程序可访问的每个地址。

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

除了代码更改之外，您还必须从Azure应用程序服务配置中删除通配符CORS条目。否则更改将无效，因为CORS头将被Azure覆盖。