无法使用 Angular 5 客户端启动与信号器核心集线器的连接答案

【问题标题】：Unable to start a connection to signalr core hub with Angular 5 client无法使用 Angular 5 客户端启动与信号器核心集线器的连接
【发布时间】：2018-06-15 18:15:26
【问题描述】：

我有一个运行 SignalR Core 集线器的 .Net Core 2.0 C# Web Api。我什至无法从角度（5.0.1）开始（）我的 hubConnection 收到此错误：

选项https://localhost:44301/hubs/sample 405（方法不允许）

错误：无法启动连接。错误：方法不允许

建立连接时出错:(

XHR 加载失败：OPTIONS "https://localhost:44301/hubs/sample"。

HttpError：不允许的方法在 XMLHttpRequest.xhr.onload [as __zone_symbol__ON_PROPERTYload] (webpack-internal:///../../../../@aspnet/signalr-client/dist/src/HttpClient.js:30:28) 在 XMLHttpRequest.wrapFn (webpack-internal:///../../../../zone.js/dist/zone.js:1166:39) 在 ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425:31) 在 Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4816:33) 在 ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424:36) 在 Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192:47) 在 ZoneTask.invokeTask [作为调用] (webpack-internal:///../../../../zone.js/dist/zone.js:499:34) 在 invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:1540:14) 在 XMLHttpRequest.globalZoneAwareCallback (webpack-internal:///../../../../zone.js/dist/zone.js:1566:17)

我什至在努力调试这个问题，即使在提琴手的帮助下我也无法解决它。我的 Api 似乎没有问题，因为 Kestrel 控制台会打印出对集线器的请求已进入，但不会打印任何错误。而且我能够毫无问题地 GET、PUT 和 POST 到我的控制器。

这是我的 StartUp.cs 配置（我省略了与简洁无关的代码）

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy(
            "CorsPolicy",
            builder =>
                builder
                .AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials()
        );
    });

    services.AddAuthentication();
    services.AddMvcCore()
        .AddAuthorization(options => {...});
    services.AddAuthentication("Bearer")
        .AddIdentityServerAuthentication(options => {...});

    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("CorsPolicy");
    app.UseAuthentication();

    app.UseSignalR(routes =>
    {
        routes.MapHub<SampleHub>("/hubs/sample");
    });

    app.UseMvc();
}

这是我的示例中心

public interface ISampleHubClient 
{
    Task receiveMessage(SampleRequest msg);
}

public class SampleHub : Hub<ISampleHubClient>
{
    private static string _connectionId;

    public async Task Subscribe(string groupName)
    {
        await Groups.AddAsync(Context.ConnectionId, groupName);

        await Clients.Client(Context.ConnectionId).receiveMessage("Subscribed to " + groupName);
    }

    /// <inheritdoc />
    public Task Send(SampleRequest msg)
    {
        ConsoleColor.Green.WriteLine("Send : " + _connectionId);

        return Clients.Group(msg.Group).receiveMessage(msg);
    }
}

这是我的 Angular 组件代码：

import { HubConnection } from '@aspnet/signalr-client';

@Component({})
export class SignalRTestComponent implements OnInit {
    private hubConnection: HubConnection;

    ngOnInit() {
        this.initHub();
    }

    initHub()
    {
        let self = this;
        var signalrBaseUri = "https://localhost:44301/hubs/sample";

       this.hubConnection = new HubConnection(signalrBaseUri);

        this.hubConnection
        .start() // <- Failure here
        .then(() =>{
             self.hubConnection.invoke("Subscribe", this.groupName);
        })
        .catch(err => { console.log("INVOKE FAILED");console.error(err);});             
    })
    .catch(err => 
    {
        console.log('Error while establishing connection :(');
        console.log(err);
    });

    this.hubConnection.on('receiveMessage', (receivedMessage: SampleMessage) => {
        console.log("Message received : ");
        console.log(sampleMessage);
    });
}
}

任何帮助将不胜感激

【问题讨论】：

仅供参考 OPTIONS 请求已删除/替换后 alpha1
我正在使用@aspnet/signalr-client : 1.0.0-alpha2-final。如果是这样，为什么它仍在执行 OPTIONS 请求？
对不起。我的意思是发布 alpha2。

标签： angular typescript asp.net-core-2.0 kestrel-http-server asp.net-core-signalr

【解决方案1】：

问题是，the npm package has been renamed 从 @aspnet/signalr-client 到 @aspnet/signalr。更改为此新包并修复导入对我有用（至少摆脱 OPTIONS 调用错误。

import { HubConnection } from '@aspnet/signalr'

【讨论】：

【解决方案2】：

Pawel 的评论让我找到了解决这个问题的正确方向。

这里有一些帖子讨论了 OPTIONS 请求以及替换它的决定。

https://github.com/aspnet/SignalR/issues/1107

https://github.com/aspnet/SignalR/issues/1111

不过，我的问题似乎已通过纠正 nuget 包版本的错误得到解决。

我意识到我的 SignalR Hub 项目引用了 Microsoft.AspNetCore.SignalR (2.1.0-preview1-27884) 的预览版。我将其更改为使用 1.0.0-alpha2-final。我还清理了我的 node_modules 目录，验证了我的 npm 缓存，并再次重新安装了所有内容

npm cache verify
npm install

现在一切正常。

【讨论】：