web-dev-qa-db-ja.com

angular 7およびSIGNAL Rを使用するASP.NETコア2.2でのCORSポリシーの問題

私の友人と私は、APIとangularクライアントでCORSの問題に遭遇しています。リンクを確立しようとしています。signalRを使用しています。クライアント（Angular 7）は、サーバー（ASP .NETコア2.2）。

ブラウザコンソールに次のメッセージが表示されます。

Origin（ http：// localhost：4200 'から' https：// ourEndpoint/CoordinatorHub/negotiate 'でのXMLHttpRequestへのアクセスCORSポリシーによってブロックされました：プリフライトリクエストへのレスポンスがアクセス制御チェックに合格しません：リクエストの認証情報モードが次の場合、レスポンスの 'Access-Control-Allow-Origin'ヘッダーの値はワイルドカード '*'であってはなりません'含める'。 XMLHttpRequestによって開始された要求の資格情報モードは、withCredentials属性によって制御されます。

サーバ側

私たちのstartup.csはこのように見えます、私たちはMicrosoftのドキュメントに従っています

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    services.AddDbContext<OneRoomContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("OneRoomContext")));
    services.AddSignalR();
    // Register the Swagger services
    services.AddSwaggerDocument();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseDeveloperExceptionPage();
    app.UseCors(builder =>
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader()
               .AllowCredentials());
    //if (env.IsDevelopment())
    //{
    //    app.UseDeveloperExceptionPage();
    //    app.UseCors(builder =>
    //        builder.AllowAnyOrigin()
    //               .AllowAnyMethod()
    //               .AllowAnyHeader());
    //}
    //else
    //{
    //    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    //    app.UseHsts();
    //}
    app.UseSignalR(route =>
    {
        route.MapHub<CoordinatorHub>("/CoordinatorHub");
    });
    app.UseHttpsRedirection();
    app.UseMvc();
    // Register the Swagger generator and the Swagger UI middlewares
    app.UseSwagger();
    app.UseSwaggerUi3();
}

そしてこれが私たちのコントローラーです：

using Microsoft.AspNetCore.SignalR;
using oneroom_api.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace oneroom_api.SignalR
{
    public class CoordinatorHub : Hub
    {
        public Task SendNewUser(User user)
        {
            return Clients.All.SendAsync("GetNewUser", user);
        }
    }
}

Azureポータル：CORS許可* origins

クライアント側

これは、app.component.tsが次のようになる（ngOnInit）

@ aspnet/signalrパッケージを使用しています

this.hubConnection = new signalR.HubConnectionBuilder()
    .withUrl(localStorage.getItem('endpoint') + '/CoordinatorHub')
    .build();

this.hubConnection.on('send', data => {
  console.log(data);
});

this.hubConnection.start().then(() => this.hubConnection.invoke('send', 'Hello'));

資格情報モードを無効にする方法またはwithCredentialsステータスをどこに指定する必要がありますか？

angularasp.net-corecorssignalr
5
RLoris

基本的に問題は、AzureのCORSがstartup.csのコードを上書きしたことでした。Azureポータルの構成CORSを削除すると、すべてが機能します。古いsignalR-clientは非推奨であるため、angularでsignal R npmパッケージを使用しました。

0
RLoris