对预检请求的响应未通过访问控制检查：响应中 'Access-Control-Allow-Credentials' header 的值为 ''

Question

我正在 angular 6 和 asp.net 内核上使用 SignalR 功能。但是一直收到此错误 对预检请求的响应未通过访问控制检查：响应中 'Access-Control-Allow-Credentials' header 的值是 '' 必须是 'true'当请求的凭据模式为 'include'.

做了一些研究，发现这是服务器的 CORS 问题 side.So 修改了服务器代码。

startup.cs

public void ConfigureServices(IServiceCollection services)
        {
    services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
                {
                    builder.AllowAnyOrigin()
                           .AllowAnyMethod()
                           .AllowAnyHeader()
                           .WithOrigins("http://localhost:4200");
                }));
     services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
         app.UseCors("CorsPolicy");
         app.UseSignalR(routes =>
            {
                routes.MapHub<SignalR>("/rule");
            });
}

angular应用程序

ngOnInit() {
this.callSignalR()
}

    private callSignalR(): void {
        // set up the signal R
        let connection = new signalR.HubConnectionBuilder().withUrl(environment.baseUrl+"/rule").build();
        //start the connection 
        connection.start().then(() => connection.invoke("updateRules", this.autheService.getCurrentuser.userId));
        //Get the response from the server
        connection.on("updateRules", data => {console.log(data);}); 
      }

参考资料

Access-Control-Allow-Origin - Angular 5

https://github.com/aspnet/SignalR/issues/2095

https://github.com/SignalR/SignalR/issues/1694

https://github.com/aspnet/SignalR/issues/2110

Answer 1

您必须允许您的 cors-policy 凭据，因为 signalr 也在传递 cookie。

public void ConfigureServices(IServiceCollection services)
        {
    services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
                {
                    builder.AllowAnyOrigin()
                           .AllowAnyMethod()
                           .AllowAnyHeader()
                           .AllowCredentials()
                           .WithOrigins("http://localhost:4200");
                }));
     services.AddSignalR();
}

Answer 2

在Startup.cs

public void ConfigureServices(IServiceCollection services)
    {
       services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader()
                       .AllowCredentials()
                       .WithOrigins("http://localhost:4200");
            }));
       services.AddSignalR();
    }


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      app.UseEndpoints(endpoints => 
        {
            endpoints.MapHub<BroadcastHub>("/notify");
        });

     }

来自您的 angular 应用程序

 ngOnInit(): void {
     const connection = new signalR.HubConnectionBuilder()
     .configureLogging(signalR.LogLevel.Information)
     .withUrl(environment.baseUrl + 'notify')
     .build();

     connection.start().then( () => {
         console.log('SignalR Connected!');
         }).catch( (err) => {
             return console.error(err.toString());
         });
      // BoradcastMessage is the name of the function in your SignalR 
      // interface.
     connection.on('BroadcastMessage', () => {
       console.log('Message from server');
     });
 }

对预检请求的响应未通过访问控制检查：响应中 'Access-Control-Allow-Credentials' header 的值为 ''

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is ''

c#

angular

asp.net-core

asp.net-core-signalr

在Startup.cs

来自您的 angular 应用程序