使用 SIGNAL R 的 Angular 7 和 ASP.NET Core 2.2 的 CORS 策略问题

Posted 2023-03-03

【中文标题】使用 SIGNAL R 的 Angular 7 和 ASP.NET Core 2.2 的 CORS 策略问题

【英文标题】：CORS policy issue with angular 7 and ASP.NET core 2.2 using SIGNAL R

【发布时间】：2019-07-15 11:16:40

【问题描述】：

我和我的朋友在使用我们的 API 和 Angular 客户端时遇到了 CORS 问题。 我们正在尝试建立一个链接，我们正在使用 signalR 并且客户端（Angular 7）注册自己以接收来自服务器（ASP .NET core 2.2）的消息。

在浏览器控制台中，我收到了这条消息：

从源“http://localhost:4200”访问“https://ourEndpoint/CoordinatorHub/negotiate”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin”的值' 当请求的凭证模式为 'include' 时，响应中的标头不能是通配符 '*'。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

服务器端

我们的startup.cs看起来是这样的，我们已经关注了microsoft docs

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

Azure 门户：允许 CORS * 来源

客户端

这就是我们的 app.component.ts 的样子 (ngOnInit)

我们正在使用@aspnet/signalr 包

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

如何禁用凭据模式或我需要在哪里提供 withCredentials 状态？

感谢您的时间和回答

【问题讨论】：

@johnny5 不，在 Configure 方法中配置 CORS 没有任何问题。它绝对不会被弃用。在 ConfigureService 方法中配置 CORS 策略只是一种不同且更灵活的方式。请参阅 ASP.NET Core 2.2 的官方文档docs.microsoft.com/en-us/aspnet/core/security/…

【参考方案1】：

基本上问题是 azure 上的 CORS 覆盖了我们的 startup.cs 中的代码，我们最终删除了 azure 门户上的配置 CORS，一切正常。由于旧的 signalR-client 已弃用，我们使用了带有 angular 的 signal R npm 包。

【讨论】：

我在几天前的回答中提供了完整的答案（包括有关在 Azure 上禁用 CORS 的提示）。您的答案只是部分完整，因为它不会解决通配符错误。不过，我很高兴您能够自己找到问题。

是的，对不起，我刚刚看到你更新了 21 的答案，我错过了，仍然感谢你的时间！

【参考方案2】：

正如错误消息所述，您需要明确指定允许的 CORS 来源。

当请求的凭据模式为“包含”时，响应中“Access-Control-Allow-Origin”标头的值不得通配符“*”。

您当然可以尝试让 SignalR 停止发出要求您的 API 发送 Access-Control-Allow-Credentials 标头的请求，具体取决于您打算如何处理身份验证（cookie 或不记名令牌？）。这比简单地扩展“允许的来源”列表要复杂得多。除此之外，您确实应该避免使用通配符作为来源，尤其是在生产系统上。

对于本地开发，将开发服务器的地址添加到允许的来源列表中就足够了。必须为您希望应用程序可在其下访问的每个地址扩展该列表。

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

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

【讨论】：

如您所见，我们的创业公司已经有了这条线。你的补丁对我们不起作用。

不，不是。您发布的代码是 builder.AllowAnyOrigin()，这会导致 API 发送 Access-Control-Allow-Origin: * 标头。

什么不起作用？您仍然收到相同的错误消息吗？响应的标题是什么样的？

我们在代码中使用 AnyOrigin() ，它似乎工作正常。实际上我们的配置看起来和上面的差不多