Angular:无法在 SignalR HubConnection 中传递 API url [英] Angular : Unable to pass API url in SignalR HubConnection

问题描述

我在 Angular6 中开发了一个项目.需要为实时聊天开发部分.为此，我在我的 asp.net 核心 Web Apiproject 中使用 SignalR.现在我想在我的 Angular 项目中使用这个 Web Api 参考.

I have developed a project in Angular6. There is a requirement to develop section for live chat. For that I am using SignalR in my asp.net core Web Apiproject. Now I want to use this Web Api reference in my Angular project.

我正在使用 这个 链接.

但是在 App.Component.ts 中提供 Web Api url 时，出现以下错误:

But while providing the Web Api url in App.Component.ts, I am getting below error :

HubConnection"类的构造函数是私有的，只能访问在类声明中.

Constructor of class 'HubConnection' is private and only accessible within the class declaration.

应用组件.ts:

import { HubConnection } from '@aspnet/signalr';
import { Message } from 'primeng/api';

export class AppComponent implements OnInit {
  public _hubConnection: HubConnection;
  msgs: Message[] = [];
  constructor() {   
  }
  ngOnInit() {
    this._hubConnection = new HubConnection('http://localhost:1874/notify'); // getting error on this line.

编辑:尝试以下代码:-

修改后的 App.Component.ts :

Modified App.Component.ts :

import { HubConnection } from '@aspnet/signalr';
import * as signalR from '@aspnet/signalr';
import { Message } from 'primeng/api';

export class AppComponent implements OnInit {
  public _hubConnection: HubConnection;
  msgs: Message[] = [];
  constructor() {   
  }
  ngOnInit() {       
    this._hubConnection = new signalR.HubConnectionBuilder()
          .withUrl('http://localhost:1874/notify')
          .configureLogging(signalR.LogLevel.Information)
          .build();

错误:

加载失败http://localhost:1874/notify/negotiate:对预检请求的响应未通过访问控制检查:响应中的Access-Control-Allow-Credentials"标头是"当请求的凭据模式为包含"时，必须为真".Origin 'http://localhost:4200' 因此不允许访问.这XMLHttpRequest 发起的请求的凭证模式是由 withCredentials 属性控制.

Failed to load http://localhost:1874/notify/negotiate: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

推荐答案

他们更改了 SignalR 客户端 HubConnection 的构造函数，不再允许您在客户端构造函数中传递路由，并制作了 HubConnection 构造函数私有以强制执行更改.相反，您需要使用 HubConnectionBuilder 如下:

They changed the constructors for SignalR Client HubConnection to no longer allow you to pass the route in the client constructor and made the HubConnection constructor private to enforce the change. Instead, you need to use the HubConnectionBuilder as follows:

new HubConnectionBuilder().withUrl("/YOURROUTEHERE").build();

您需要在标题中导入 HubConnectionBuilder，如下所示:

You will want to import the HubConnectionBuilder in your header as follows:

import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';

如果有帮助，我还刚刚发布了我的 RxSignalR 示例的更新，适用于@aspnet/signalr 1.0.2、RxJs 5.5.6 和 Angular 6.请查看 ReactiveChat 组件为例.

In case it helps, I also just posted an update to my RxSignalR samples for @aspnet/signalr 1.0.2, RxJs 5.5.6 and Angular 6. Check out the ReactiveChat component for an example.

这篇关于Angular:无法在 SignalR HubConnection 中传递 API url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！