通过 React 客户端应用程序连接到 Ocelot Api 网关中的 SignalR 集线器时出现未处理的拒绝（错误）（HttpError）答案

【问题标题】：Unhandled Rejection (Error) (HttpError) when connecting to SignalR hub in Ocelot Api Gateway via React Client Application通过 React 客户端应用程序连接到 Ocelot Api 网关中的 SignalR 集线器时出现未处理的拒绝（错误）（HttpError）
【发布时间】：2021-05-04 14:42:05
【问题描述】：

我正在尝试从 React 应用程序连接到 Ocelot Api 网关后面的 SignalR 集线器。但是，这样做时我收到以下错误：

Unhandled Rejection (Error): 
new HttpError
index.js:1 [2021-01-31T02:42:31.498Z] Error: Failed to complete negotiation with the server: Error
index.js:1 [2021-01-31T02:42:31.498Z] Error: Failed to start the connection: Error
Uncaught (in promise) Error
    at new HttpError (Errors.ts:20)
    at FetchHttpClient.<anonymous> (FetchHttpClient.ts:116)
    at step (FetchHttpClient.ts:2)
    at Object.next (FetchHttpClient.ts:2)
    at fulfilled (FetchHttpClient.ts:2)

我已阅读 Ocelot 在 SignalR/WS (https://ocelot.readthedocs.io/en/latest/features/websockets.html) 上的文档，并确保请求在我的 ocelot.json 中按照应有的方式进行路由：

    {
        "DownstreamPathTemplate": "/notificationhub",
        "DownstreamScheme": "ws",
        "DownstreamHostAndPorts": [
          {
            "Host": "localhost",
            "Port": 7001
          }
        ],
        "UpstreamPathTemplate": "/notifications",
        "UpstreamHttpMethod": [ "GET", "POST", "PUT", "DELETE", "OPTIONS" ]
      },

怎么了？

【问题讨论】：

标签： c# reactjs signalr asp.net-core-signalr ocelot

【解决方案1】：

首先，Ocelot 文档中没有提到的 Web 套接字安全 (wss) 可以用作 sam9291 在此处 (https://github.com/ThreeMammals/Ocelot/issues/1179) 指出的 DownStreamScheme。

其次，必须在 SignalR 应用上使用 AllowCredentials() 启用 Cors，Microsoft 在此处 (https://docs.microsoft.com/en-us/aspnet/core/signalr/security?view=aspnetcore-5.0) 对此进行了详细说明。

第三，ocelot.json 中必须有一个 {catchAll} 路由，这是必要的，因为握手涉及获取/发布到其他路由：

    {
        "DownstreamPathTemplate": "/notificationhub/{catchAll}",
        "DownstreamScheme": "ws",
        "DownstreamHostAndPorts": [
          {
            "Host": "localhost",
            "Port": 7001
          }
        ],
        "UpstreamPathTemplate": "/notifications/{catchAll}",
        "UpstreamHttpMethod": [ "GET", "POST", "PUT", "DELETE", "OPTIONS" ]
      },

第四，当我在上述更改后尝试请求 /notifications 时收到错误 404，不确定这是错误还是功能，就像 LilRazi 在这里遇到的问题 (ocelot: 404 error when add extra path on upstream url)。所以我只是为 /notifications 部分添加了一条路由，如下所示：

    {
        "DownstreamPathTemplate": "/notificationhub",
        "DownstreamScheme": "ws",
        "DownstreamHostAndPorts": [
          {
            "Host": "localhost",
            "Port": 7001
          }
        ],
        "UpstreamPathTemplate": "/notifications",
        "UpstreamHttpMethod": [ "GET", "POST", "PUT", "DELETE", "OPTIONS" ]
      },

一切正常！

【讨论】：