Javascript 无法完成与服务器的协商-Angular+；信号员

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

所以现在我正试着做角度运动。我已经为Angular中的Signaler创建了一个服务来建立连接，但是我得到了错误

在“网络”选项卡上

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

  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();

根据本文推荐的答案，但它只是返回

我以前从未使用过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);
    });
  }
}

协商

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

host.json

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

---

好的，你不能把你的角度和信号器功能连接起来，因为这是政治

您忘记在函数上配置CORS。

---

尝试使用此配置。

我更新了我的问题以包括host.json。我将其设置为localhost:4200，因为Angular当前来自于此。好的，我现在看到了错误，您将配置放在thost.json上，而不是放在local.settings.json上。也可以尝试用“CORS”开头“*”。哎哟。我现在修好了。我现在将其移动到local.settings.json。但错误仍然存在。另外，如果我将其更改为

“CORS”：“*”，

，则浏览器会抛出此错误。（第一行），但同时如果我放入

“CORS”：http://localhost:4200“

然后我得到错误

跨源请求被阻止：同源策略不允许在http://localhost:7070/negotiate. （原因：CORS请求未成功）。

有什么想法吗？好的，然后删除CORS请求。也可以尝试使用不同的浏览器、chrome、firefox等…@user6680谢谢，发布功能时别忘了在azure门户上配置CORS！！！

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