使用 Angular 前端部署在 Azure Kubernetes 服务中的 .net 核心应用程序中的 Azure SignalR 服务抛出错误：WebSocket 无法连接答案

【问题标题】：Azure SignalR Service in .net core app deployed in Azure Kubernetes Service with Angular front end is throwing Error: WebSocket failed to connect使用 Angular 前端部署在 Azure Kubernetes 服务中的 .net 核心应用程序中的 Azure SignalR 服务抛出错误：WebSocket 无法连接
【发布时间】：2022-09-28 21:04:01
【问题描述】：

我正在尝试使用 Azure SignalR 服务（免费层）运行 .net 核心应用程序。 .net 核心应用部署在 Azure Kubernetes 服务中。我有一个尝试连接到 WebSocket 的 Angular 前端应用程序。以下是我在 Program.cs 文件中的配置：

    services.AddCors(options => options.AddPolicy(\"testing\", builder =>
    {
        builder.WithOrigins(\"https://somebackendserver.com\");
        builder.AllowCredentials();
        builder.AllowAnyHeader();
        builder.AllowAnyMethod();
    })); 
    services.AddSignalR(options =>
    {
        options.EnableDetailedErrors = true;
    }).AddAzureSignalR(connectionStringSignalR);


app.UseCors(\"testing\");
app.UseEndpoints(configure =>
{
    configure.MapHub<GenerationNotificationHub>(\"/hub\");
});

这是我创建连接的 Angular 端代码：

public createConnection = (): void => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .configureLogging(signalR.LogLevel.Error)
      .withUrl(`https://somebackendserver.com/hub`,
        {
          accessTokenFactory: () => this.sessionService.get(SignalrNotificationService.accessTokenStorageKey),
          transport: signalR.HttpTransportType.WebSockets,
          skipNegotiation: true
        })
      .withAutomaticReconnect()
      .build();

    this.hubConnection.start().then().catch();
  }

在 AKS 中部署解决方案时，我在浏览器控制台窗口中收到以下错误：

错误：无法启动连接：错误：WebSocket 无法启动连接。在服务器上找不到连接，要么端点可能不是 SignalR 端点，连接 ID 不是存在于服务器上，或者存在阻止 WebSockets 的代理。如果你让多个服务器检查是否启用了粘性会话。

这是服务器端错误日志

连接失败 \'(主)https://xxx.service.signalr.net(hub=GenerationNotificationHub)\', 将在退避期后重试。错误详情：无法连接到远程服务器。从传输流.. ID：958c67ab-1e91-4983-83ad-bfaf02bc48da

这是我尝试连接到 WebSocket 时出现的 Postman 错误：

状态码：向 WebSocket 所在的站点发出 503 WebSocket 请求禁用。请求标头 Sec-WebSocket-Version：13 Sec-WebSocket-Key： AjiVAXGSpcYCbiGbftHbcg== 连接：升级升级：websocket Sec-WebSocket-Extensions：permessage-deflate； client_max_window_bits 主机：somebackendserver.com 响应标头内容长度：27 内容类型：文本/html 日期：星期一，2022 年 9 月 19 日 13:44:16 GMT 服务器：微软-IIS/10.0

当我尝试在 localhost 上运行该应用程序时，它运行良好，但当我将它部署为 Azure 中的 Kubernetes 服务时，似乎出现了问题。

编辑：我们有一个 Kong API 网关来管理我们的 API 网关服务，我怀疑它以某种方式阻止了 SignalR websocket 网络连接。我不断收到此 CORS 错误

访问 >\'https://api.XXX.dev.XXXXXX.com/hub/generation/negotiate?negotiateVersion=1\' 从源 \'https://XXXX.dev.XXXXXX.com\' 获取已 > 被 CORS 政策阻止：对预检请求的响应未通过访问控制检查：\'Access-Control-Allow-Origin\' 标头的值 >\'https://portal.api.dev.XXXX.com\' 不是等于提供的 >origin。让服务器发送带有有效值的标头，或者，如果不透明的响应满足您的需求，请将请求的模式设置为 \'no-cors\' >以获取禁用 CORS 的资源。

标签： angular asp.net-core kubernetes kong azure-signalr

【解决方案1】：

尝试在 Program.cs 文件中添加以下代码：

services.AddCors(options => options.AddPolicy("testing", builder =>
{
    builder.WithOrigins("https://somebackendserver.com", "https://portal.api.dev.XXXX.com");
    builder.AllowCredentials();
    builder.AllowAnyHeader();
    builder.AllowAnyMethod();
}));

说明：WithOrigins() 方法用于指定允许访问资源的来源。在这种情况下，我添加了两个来源。您可以根据需要添加任意数量的来源。

【讨论】：