javascript - 无法完成与服务器的协商 - Angular + SignalR

Question

我无法使用 Nodejs 使用 Angular + Azure Functions 建立连接。我知道后端可以工作，因为我使用以下 documentation 创建了它并使用文档中提供的客户端 URL 对其进行了测试。消息传递可以跨多个客户端运行。

所以现在我正在尝试让 Angular 正常工作。我已经在 Angular 中为信号器创建了一项服务来建立连接，但出现错误

在网络选项卡上

我还尝试在服务中替换此代码

  private buildConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl("http://localhost:7070") //use your api adress here and make sure you use right hub name.
      .build();
  };

使用此代码

  private buildConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .configureLogging(signalR.LogLevel.Debug)
      .withUrl("http://localhost:7070/api", {
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets
      })
      .build();

根据此 post 的推荐答案但随后它就返回了

我以前从未使用过 SignalR，因此我尝试通过查看几个教程来将其拼凑起来。我感谢任何帮助!

信号服务

import { Injectable, EventEmitter } from "@angular/core";
import * as signalR from "@aspnet/signalr";
import { SignalViewModel } from "./signal-view-model";

@Injectable({
  providedIn: "root"
})
export class SignalRService {
  private hubConnection: signalR.HubConnection;
  signalReceived = new EventEmitter<SignalViewModel>();

  constructor() {
    this.buildConnection();
    this.startConnection();
  }

  private buildConnection = () => {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl("http://localhost:7070/api") //c
      .build();
  };

  private startConnection = () => {
    this.hubConnection
      .start()
      .then(() => {
        console.log("Connection Started...");
        this.registerSignalEvents();
      })
      .catch(err => {
        console.log("Error while starting connection: " + err);

        //if you get error try to start connection again after 3 seconds.
        setTimeout(function () {
          this.startConnection();
        }, 3000);
      });
  };

  private registerSignalEvents() {
    this.hubConnection.on("SignalMessageReceived", (data: SignalViewModel) => {
      this.signalReceived.emit(data);
    });
  }
}

就像Reference Docs一样上面的链接，这就是我的 azure 函数的样子

消息

module.exports = async function (context, req) {
  return {
    "target": "newMessage",
    "arguments": [ req.body ]
  };
};

谈判

module.exports = async function (context, req, connectionInfo) {
  context.res.json(connectionInfo);
};

主机.json

{
  "version": "2.0",
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[1.*, 2.0.0)"
  },
  "Host": {
    "LocalHttpPort": 7070,
    "CORS": "http://localhost:4200",
    "CORSCredentials": true
  }
}

Answer 1

好吧，由于 CORS 政策，您无法将 Angular 与 SignalR 函数连接起来。

您忘记在函数上配置 CORS。

尝试使用此配置。