Angular携带Bearer认证Cookie连接SignalR服务失败问题

核心问题分析 #

非认证连接正常但带Bearer Cookie时WebSocket连接失败，且.NET桌面应用、Postman等客户端无问题，说明问题集中在Angular端的认证传递配置或浏览器跨域Cookie限制上，与SignalR服务本身无关。

具体解决方案 #

1. 开启跨域凭证传递（关键） #

浏览器跨域WebSocket请求默认不会携带Cookie，必须显式启用withCredentials，同时服务端需允许凭证传递：
修改你的连接代码，添加withCredentials并补全缺失的.build()方法：

public init() {
  const token = "OKTA token";

  this.hubConnection = new signalR.HubConnectionBuilder
    .withUrl("https://server:25247/netshub/", {
      accessTokenFactory: () => token,
      withCredentials: true // 新增：允许携带Cookie/凭证
    })
    .build(); // 原代码遗漏此方法，会导致连接对象未正确初始化

  this.hubConnection.start().catch(err => console.error(err.toString()));
}

同时确保SignalR服务端CORS配置开启AllowCredentials（以.NET为例）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", policy =>
    {
        policy.WithOrigins("你的Angular应用域名")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 必须开启，否则浏览器会拒绝传递凭证
    });
});

2. 匹配服务端的Token接收方式 #

当前代码用accessTokenFactory会将Token放入Authorization: Bearer {token}请求头，需确认服务端的Token解析逻辑：

• 如果服务端从Cookie获取Token：移除accessTokenFactory，确保OKTA Token已正确写入浏览器Cookie，同时保持withCredentials: true让WebSocket请求携带Cookie。
• 如果服务端从URL参数获取Token：取消注释代码中的+tokenValue，将Token拼接到URL后，同时确保服务端配置允许从查询参数解析Token。

3. 修复Cookie的SameSite属性 #

跨域场景下，浏览器会拦截SameSite=Lax或Strict的Cookie，需确保服务端设置Cookie的SameSite=None且Secure=true（因你使用HTTPS）：
以.NET Cookie认证配置为例：

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.Cookie.SameSite = SameSiteMode.None;
        options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
    });

4. 检查代理服务器的WebSocket支持 #

如果Angular应用部署在反向代理后（如Nginx），需确保代理配置支持WebSocket协议转发：
Nginx示例配置：

location /netshub/ {
    proxy_pass https://server:25247/netshub/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

验证步骤 #

1. 打开浏览器开发者工具的Network标签，查看WebSocket请求的Request Headers，确认Cookie是否被携带。
2. 查看SignalR服务端日志，确认认证失败的具体原因（如Token未接收、Token无效）。

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