Angular与.NET Core集成SignalR时添加accessTokenFactory引发CORS跨域问题

你遇到的问题看似是CORS错误，但本质原因是你的JWT Token长度超过了URL的最大限制。当使用WebSocket或Server-Sent Events（SSE）传输时，SignalR默认会把access_token附加到查询字符串中，超长的URL会被浏览器或服务器拦截，导致请求没有得到正常响应（连CORS头都没返回），最终触发浏览器的CORS报错。而长轮询能正常工作，是因为它使用POST请求将Token放在HTTP头里，不受URL长度限制。

下面是具体的解决步骤：

1. 前端修改：强制WebSocket/SSE使用HTTP头传递Token #

修改你的SignalR连接配置，让Token通过Authorization请求头传递，而不是查询字符串。这样既能避开URL长度限制，也更安全：

this.hubConnection = new signalR.HubConnectionBuilder()
  .withUrl(`${environment.bzApiBaseUrl}/hubs/heartbeat`, {
    // 保留accessTokenFactory用于动态获取Token
    accessTokenFactory: () => token,
    // 指定允许的传输方式
    transports: signalR.HttpTransportType.WebSockets | signalR.HttpTransportType.ServerSentEvents,
    // 显式设置Authorization头
    headers: {
      "Authorization": `Bearer ${token}`
    },
    // 可选：跳过协商步骤，直接使用WebSocket（适合确定仅用WebSocket的场景）
    skipNegotiation: true
  })
  .build();

说明：如果需要兼容多种传输方式，可以去掉skipNegotiation: true，SignalR会自动协商合适的传输方式，并通过请求头传递Token。

2. 后端配置：确保能正确解析WebSocket请求的Authorization头 #

你的现有中间件顺序已经正确（UseCors → UseAuthentication → UseAuthorization → UseEndpoints），但可以补充以下配置强化安全性：

• 给HeartbeatHub添加[Authorize]属性（如果需要认证的话），让ASP.NET Core自动解析Authorization头中的Token。
• 在Hub配置中禁止通过查询字符串传递Token，强制使用请求头：

app.UseEndpoints(e => {
  e.MapControllers();
  e.MapHub<HeartbeatHub>("/api/hubs/heartbeat", options => {
    // 允许所有支持的传输方式
    options.Transports = HttpTransportType.WebSockets | HttpTransportType.ServerSentEvents | HttpTransportType.LongPolling;
    // 禁止从查询字符串读取Token，强制使用请求头传递
    options.DisableImplicitFromServicesAuthentication = true;
  });
});

3. 可选：精简Token长度（从根源解决） #

如果你的Token包含过多不必要的声明（Claims），可以通过以下方式缩短Token长度：

• 移除不需要的自定义Claim
• 避免将大体积数据存入Token
• 考虑使用JWT压缩（需要后端支持对应解析逻辑）

验证步骤 #

修改完成后，打开浏览器开发者工具（F12）：

1. 切换到Network标签，筛选WS（WebSocket）或EventStream（SSE）请求
2. 查看请求的Request Headers，确认是否包含Authorization: Bearer <你的Token>
3. 检查连接是否成功建立，不再出现CORS报错

内容的提问来源于stack exchange，提问作者Sebastian S.