已配置SignalR服务器Cors仍报No 'Access-Control-Allow-Origin'头错误

看起来你是在Angular 5和SignalR的跨域连接上踩坑了，我帮你梳理下问题所在和解决办法：

核心问题分析 #

你遇到的Access-Control-Allow-Origin错误，本质是两个关键配置不匹配导致的：

1. 客户端SignalR连接路径错配 #

你的服务器端在Startup类里，把SignalR的端点映射到了/signalr路径：

app.Map("/signalr", map => {
  map.UseCors(CorsOptions.AllowAll);
  var hubConfiguration = new HubConfiguration {};
  map.RunSignalR(hubConfiguration);
});

但客户端代码里直接去连接/chatHub：

this.hubConnection = new HubConnection('http://localhost:52527/chatHub');

这就导致请求根本没走到你配置了CORS的/signalr端点下，自然触发了跨域拦截。

2. CORS配置未覆盖实际请求路径 #

虽然你在/signalr的映射里加了UseCors(CorsOptions.AllowAll)，但因为客户端请求的路径不对，这个CORS规则根本没生效。

一步步解决 #

第一步：修正客户端连接路径 #

客户端应该连接到服务器配置的SignalR端点/signalr，Hub的名称会通过SignalR的协商机制自动关联，不需要直接写在URL里。修改Angular代码：

ngOnInit() {
  // 连接到服务器的SignalR端点，而不是直接连Hub
  this.hubConnection = new HubConnection('http://localhost:52527/signalr');
  
  console.log(this.hubConnection);
  this.hubConnection
    .start()
    .then(() => {
      console.log('Connection started!');
    })
    .catch(err => {
      console.log(err);
    });
}

如果你的SignalR客户端版本需要指定协议，可以补充配置：

import { JsonHubProtocol } from '@aspnet/signalr-client';

// ...

this.hubConnection = new HubConnection('http://localhost:52527/signalr', {
  hubProtocol: new JsonHubProtocol()
});

第二步：确保服务器端CORS配置生效 #

如果修正路径后还是有跨域问题，可以调整服务器端的配置，把CORS放在SignalR映射之前全局启用，确保覆盖所有请求：

public void Configuration(IAppBuilder app)
{
    // 先全局启用CORS，确保所有请求都能触发跨域规则
    app.UseCors(CorsOptions.AllowAll);
    
    // 再映射SignalR端点
    app.MapSignalR("/signalr", new HubConfiguration());
}

第三步：额外检查点 #

• 确认你的服务器Hub类命名正确：如果客户端要连接的是chatHub，服务器端的Hub类应该是ChatHub（SignalR默认会把类名转成小写作为Hub的访问名称）：

public class ChatHub : Hub
{
    // 你的Hub业务方法
}

• 检查@aspnet/signalr-client的版本和服务器端SignalR版本是否兼容，版本不匹配也可能导致连接失败。
• 打开浏览器的开发者工具，查看Network面板，确认SignalR发起的协商请求是http://localhost:52527/signalr/negotiate，而不是直接请求/chatHub。

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