angular - Angular 和 .NET Core 的 SignalR CORS 问题

Question

我知道有很多关于这个主题的问题和答案，但没有一个符合我的具体问题。
我正在使用以下 版本

Angular 10.0.14

@aspnet/signalr 1.0.27

ASP.NET 核心 3.1

版本更新:

我刚刚用 @microsoft/signalr 5.0.11 替换了 @aspnet/signalr 1.0.27 -> 同样的问题。

SignalR 连接工作得很好，直到我在 Angular 前端添加一个 accessTokenFactory 。
前端

this.hubConnection = new signalR.HubConnectionBuilder()
  .withUrl(`${environment.bzApiBaseUrl}/hubs/heartbeat`, {
    accessTokenFactory: () => token
  })
  .build();

this.hubConnection
  .start()
  .then(() => {
    console.log('SignalR: Heartbeat - connection started');

    this.hubConnection.on('beat', () => {
      console.log('SignalR: Heartbeat - Heartbeat received');
    });
  })
  .catch(err => console.log('SignalR: Heartbeat - error while starting connection: ' + err));
  });

当我删除 accessTokenFactory 时，连接就建立起来了来自 HubConnectionBuilder .
后端

services.AddCors(options =>
{
    options.AddPolicy(
        name: MyAllowSpecificOrigins,
        builder =>
        {
            builder
                .WithOrigins(CorsSettings.TargetDomain)
                .AllowAnyHeader()
                .AllowAnyMethod()
                .SetIsOriginAllowed((host) => true)
                .AllowCredentials();
        });
});

CorsSetting 域的值为 http://localhost:4200前端运行的地方。

app.UseStaticFiles();
app.UseRouting();
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(e =>
{
    e.MapControllers();
    e.MapHub<HeartbeatHub>("/api/hubs/heartbeat");
});

添加 accessTokenFactory 后，浏览器控制台会记录以下错误:

WebSocketTransport.js:70 
WebSocket connection to 'ws://localhost:33258/api/hubs/heartbeat?id=BpBytwkEatklNR-XqGtabA&access_token=eyJ0eXAiOiJKV1QiLCJhbGci... failed:

Utils.js:190 
Error: Failed to start the transport 'WebSockets': undefined

dashboard:1 
Access to resource at 'http://localhost:33258/api/hubs/heartbeat?id=iWuMeeOKkWCUa8X9z7jXyA&access_token=eyJ0eXAiOiJKV1QiLCJhbGci...' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我不理解 CORS 问题，因为它似乎是通过使用 accessTokenFactory 向查询字符串添加 token 引起的。
我试过:

将后端 URL 添加到 CORS 源(根据文档不需要)

app.UseSignalR 而不是 app.UseEndpoints

禁用 app.UseHttpsRedirection()

以不同的方式改变了注册中间件的顺序

.SetIsOriginAllowed((host) => true) 之后 .AllowCredentials()

更新
设置 HttpTransportType 时建立连接至 LongPolling .它不适用于 WebSockets或 ServerSentEvents .

app.UseEndpoints(e =>
{
    e.MapControllers();
    e.MapHub<HeartbeatHub>("/api/hubs/heartbeat", options =>
    {
        options.Transports = HttpTransportType.LongPolling;
    });
});

使用长轮询时，似乎 token 作为 HTTP header 而不是查询字符串参数发送。 token 很长，所以我突破了最大值。使用 WebSockets 或 ServerSentEvents 时允许的 URL 长度。但我仍然不知道为什么这会导致 CORS 异常。

Answer 1

浏览器不支持 websockets 的 header ，因此必须添加不记名 token 作为查询字符串参数。由于不记名 token 的长度，我们达到了 URL 的最大长度。我们可以缩短我们的 token 或使用引用 token ，另见:https://github.com/aspnet/SignalR/issues/1266
希望这对其他人也有帮助。