Angular 19 SignalR客户端无法连接.NET 9服务端的CORS问题

问题重现 #

跨源请求被阻止：同源策略不允许读取位于http://localhost:7002/hubs/communication/negotiate?negotiateVersion=1的远程资源。（原因：缺少CORS头‘Access-Control-Allow-Origin’）。状态码：307。

排查与解决方案 #

1. 确认中间件顺序（严格遵循执行逻辑） #

确保中间件加载顺序无误，UseCors必须在MapHub之前执行，否则CORS策略无法覆盖SignalR协商请求：

// 先启用CORS策略
app.UseCors("CorsPolicy");
// 再启用WebSocket支持
app.UseWebSockets(webSocketOptions);
// 最后映射SignalR Hub
app.MapHub<CommunicationHub>("/hubs/communication");

2. 解决307重定向导致的CORS缺失问题 #

状态码307为临时重定向，多因后端启用HTTPS重定向，但前端请求的是HTTP地址，重定向后的响应未携带CORS头。解决方式二选一：

• 前端修改SignalR连接地址为HTTPS：https://localhost:7002/hubs/communication
• 开发环境临时关闭后端HTTPS重定向，注释掉app.UseHttpsRedirection();

3. 优化CORS策略配置 #

.NET 9中SignalR对CORS有强制要求，确保策略包含必要配置：

builder.Services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", policy =>
        policy.WithOrigins("http://localhost:4200") // 精确匹配前端地址，不要带末尾斜杠
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials()); // SignalR必须启用该配置
});

4. 前端客户端同步配置 #

后端启用AllowCredentials后，前端必须同步开启跨域凭证：

private startConnection() 
{
    this.hubConnection = new HubConnectionBuilder()
                                .withUrl('http://localhost:7002/hubs/communication', {
                                    withCredentials: true // 与后端配置匹配
                                })
                                .withAutomaticReconnect([100, 200, 500, 1000, 2000, 3000, 5000])
                                .build();
                                
    this.hubConnection
        .start()
        .then(() => console.log('Connection to Communication Hub succesful!'))
        .catch(err => console.log('Error establishing connection to Communication Hub: ' + err));
}

5. 简化WebSocket配置 #

WebSocket的跨域检查已被CORS策略覆盖，无需重复配置AllowedOrigins：

var webSocketOptions = new WebSocketOptions
{
    KeepAliveInterval = TimeSpan.FromMinutes(2)
};
// 移除 webSocketOptions.AllowedOrigins.Add("http://localhost:4200");
app.UseWebSockets(webSocketOptions);

内容的提问来源于stack exchange，提问作者Aren Devel