web-dev-qa-db-ja.com

Angular 5クライアントでシグナルコアハブへの接続を開始できません

SignalR Coreハブを実行している.Net Core 2.0 C＃Web Apiがあります。このエラーを受信して​​angular（5.0.1）から私のハブ接続をstart（）することさえできません：

オプション https：// localhost：44301/hubs/sample 405（許可されていないメソッド）

エラー：接続の開始に失敗しました。エラー：許可されていないメソッド

接続の確立中にエラーが発生しました:(

XHRの読み込みに失敗しました：OPTIONS " https：// localhost：44301/hubs/sample "。

HttpError：XMLHttpRequest.xhr.onloadで許可されていないメソッド[__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）at ZoneDelegate.invokeTask（webpack-internal ：///../../../../zone.js/dist/zone.js：425：31）at Object.onInvokeTask（webpack-internal：///../../ .. /core/esm5/core.js:4816:33）at ZoneDelegate.invokeTask（webpack-internal：///../../../../zone.js/dist/zone.js：424：36 ）at Zone.runTask（webpack-internal：///../../../../zone.js/dist/zone.js：192：47）at ZoneTask.invokeTask [as invoke]（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）

私はこの問題をデバッグするのに苦労していますが、フィドラーの助けを借りても解決できません。 Kestrelコンソールはハブへのリクエストが着信したことを出力しますが、エラーは出力しないため、私のAPIには問題がないようです。そして、私は問題なくコントローラーに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);
    });
}
}

どんな助けでも大歓迎です

angulartypescriptasp.net-core-2.0kestrel-http-serverasp.net-core-signalr
6
pieperu

問題は npmパッケージの名前が変更された から@aspnet/signalr-clientから@aspnet/signalr。これに変更して、新しいパッケージとインポートの修正も機能しました（少なくともOPTIONS呼び出しエラーを取り除くために）。

import { HubConnection } from '@aspnet/signalr'

6
Thomas

パヴェルのコメントは、この問題を解決する正しい方向に私をさせました。

以下は、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

これですべてが正しく動作します。

0
pieperu

WebSocketのみを使用する場合は、ネゴシエーション手順をスキップできます。

this.signalRConnection = new HubConnectionBuilder()
                                 .withUrl(your_url, 
                                         { 
                                            **skipNegotiation: true**, 
                                            **transport: HttpTransportType.WebSockets** 
                                         })
                                 .build();

この場合、ネゴシエーションは発生しません。 wss：//接続を取得するだけです。

0
Roman Olkhovsky