Angular 10与.NET Framework 4.6.1集成SignalR时的CORS问题求助

针对你遇到的CORS错误，结合.NET Framework 4.6.1（ASP.NET SignalR 2.x）和Angular 10的环境，以下是具体的排查和修复步骤：

核心问题定位 #

1. 客户端包不兼容：你使用的@microsoft/signalr是ASP.NET Core SignalR的客户端，和.NET Framework下的ASP.NET SignalR 2.x不匹配，这是导致连接路径和协议不兼容的关键原因。
2. 连接路径错误：旧版SignalR的客户端连接URL不需要追加Hub名称，而是通过Hub代理指定。
3. CORS配置冗余/顺序问题：Hub类上的[EnableCors]是WebApi的属性，对SignalR无效；同时OWIN配置顺序可能影响CORS生效。

修复步骤 #

1. 替换SignalR客户端包 #

卸载Core版客户端，安装适配ASP.NET SignalR 2.x的旧版包：

npm uninstall @microsoft/signalr
npm install signalr jquery @types/jquery --save

2. 调整Angular服务代码（适配旧版客户端） #

旧版SignalR依赖jQuery，需先在angular.json的scripts数组中引入依赖：

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/signalr/jquery.signalR.min.js"
]

然后修改SignalR服务代码：

import * as signalR from 'signalr';

@Injectable({
  providedIn: 'root'
})
export class SignalRService {
  private hubConnection: signalR.HubConnection;
  private chatHubProxy: signalR.HubProxy;

  constructor() {
    // 连接SignalR根路径，无需追加Hub名称
    this.hubConnection = $.hubConnection('http://localhost:44300/signalr');
    // 创建Hub代理，对应服务器端的[HubName("Chat")]
    this.chatHubProxy = this.hubConnection.createHubProxy('Chat');

    this.hubConnection.start()
      .done(() => console.log('SignalR连接启动成功'))
      .fail(err => console.error('SignalR连接失败：' + err));
  }

  public sendMessage(name: string, message: string): void {
    this.chatHubProxy.invoke('Send', name, message)
      .fail(err => console.error('发送消息失败：' + err));
  }

  public receiveMessage(callback: (name: string, message: string) => void): void {
    this.chatHubProxy.on('broadcastMessage', callback);
  }
}

3. 修正服务器端配置 #

移除冗余属性

删除ChatHub类上的[EnableCors]属性，该属性属于WebApi，对SignalR无效。

调整OWIN Startup配置

简化CORS配置，并确保SignalR的配置在WebApi之前：

using Microsoft.Owin;
using Microsoft.Owin.Cors;
using Owin;

[assembly: OwinStartup(typeof(YourNamespace.Startup))]

namespace YourNamespace
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 优先配置SignalR的CORS
            app.Map("/signalr", map =>
            {
                // 开发环境允许所有来源，生产环境需替换为具体域名
                map.UseCors(CorsOptions.AllowAll);
                var hubConfig = new HubConfiguration
                {
                    EnableDetailedErrors = true // 开发环境启用，生产环境关闭
                };
                map.RunSignalR(hubConfig);
            });

            // 后配置WebApi
            GlobalConfiguration.Configure(WebApiConfig.Register);
        }
    }
}

确认NuGet依赖

确保已安装Microsoft.Owin.Cors包：

Install-Package Microsoft.Owin.Cors

额外排查点 #

• 验证.NET项目的端口确实是44300（查看项目属性→Web→服务器设置）。
• 生产环境中，不要使用CorsOptions.AllowAll，需指定具体的Angular域名（如http://localhost:4200），同时若需要携带凭证（如Cookie），需设置SupportsCredentials = true，且不能使用*作为允许的来源。

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