CORSポリシーと.NET Core 3.1に関する問題


12

何が欠けているのかはわかりませんが、.NET Core 3.1およびAngular 8クライアント側でCORSポリシーを機能させることができません。

Startup.cs

        public void ConfigureServices(IServiceCollection services)
        {
            // ...

            // Add CORS policy
            services.AddCors(options =>
            {
                options.AddPolicy("foo",
                builder =>
                {
                    // Not a permanent solution, but just trying to isolate the problem
                    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
                });
            });

            services.AddControllers();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();

            // Use the CORS policy
            app.UseCors("foo");

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }

エラーメッセージクライアント側:

Access to XMLHttpRequest at 'https://localhost:8082/api/auth/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

更新:

CORSを正しく構成していませんでした(そして、以下の受け入れられた回答は実際にそれを助けました)問題の根本は無関係でした。追加のコンテキストとして、CLIを使用してAPIとAngularアプリを実行すると、アプリは完全に正常に動作していました-私は、両方をWebサーバーにデプロイした後にのみこの問題が発生していました。

「実際」の問題は、私が唯一のAPIにフラットファイルエラーログを追加し、アプリはすべてのSQLに接続することができなかったことを見つけるために、SQL Serverのトレースを実行した後に発見されたSQL接続に関連していることになりました。

通常、これは500を返すだけで、10秒以内に問題が発生すると思っていましたが、CORSの設定ミスにより、CORSミドルウェアが最初に失敗したため、500が実際に返されることはありませんでした。 これは絶対に控えめに言っても非常にイライラしました!。しかし、もし私が「間違ったうさぎを追いかけていた」ので、もしそうなら、他の人がこの状況に陥った場合に備えて、ここにそれを付け加えたいと思います。 CORS構成を修正した後、実際の問題はCORSとはまったく無関係であることに気付きました。

TL; DR; -CORSポリシーが正しく設定されていないと、「非CORS」の.NETサーバー側エラーがCORSエラーとして返されることがある

参照:

https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1#cors-with-named-policy-and-middleware

https://medium.com/swlh/cors-headers-with-dot-net-core-3-5c9dfc664785


1
app.UseCors("foo");前に設定してみてくださいapp.UseHttpsRedirection();
StepUp

@StepUp推奨に感謝しますが、それでもうまくいきません
KMJungersen

問題を解決しましたか?
StepUp

誰かがこの問題を解決しましたか?なぜ答えが受け入れられないのですか?
Waseem Ahmad Naeem

はい、申し訳ありませんが、解決後はこの問題に戻ったことはありません。追加のコンテキストを使用して、質問に更新を追加しました。ありがとうございました!
KMJungersen

回答:


21

最初app.UseRouting();app.UseCors("foo");

Configure次のようにメソッドを変更します。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();



    app.UseRouting();  // first
    // Use the CORS policy
    app.UseCors("foo"); // second

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

それは私のために働いた!


-nugetパッケージは必要ですか?
チャナ

CORSのためnugetパッケージ
チャナ

1
@chana-nugetパッケージをインストールする必要はありません
AbolfazlR

7
この問題はDAYSで行き詰まりました。インターネットからは何もうまくいきませんでした。OPのConfigureServicesコードと組み合わせたあなたのソリューションは私の問題を解決しました。どうもありがとう!
Tahreem Iqbal

1
私は長い間困惑していた。どうもありがとう!
マイルズJ

6

Web APIはを使用していapp.UseHttpsRedirection()ます。CORSリクエストしているクライアントがhttpsベースではない場合に問題が発生します。したがって、httpクライアントで使用するには、その行をコメント化するか削除する必要があります。

この問題はではありませんCORS。httpsが原因でこの問題が発生していますが、スローされたエラーがCORSに関するものです。


ありがとう。これで私の問題は解決しました
レーガンギャラント

1
それは正しいです!行UseHttpsRedirection()はUseCors()の後にある必要があります
Eric


0

localhostをとして使用http://localhost:4200しているので、構成に設定してみてください。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options => options.AddPolicy("ApiCorsPolicy", build =>
    {                
        build.WithOrigins("http://localhost:4200")
             .AllowAnyMethod()
             .AllowAnyHeader();
        }));
        // ... other code is omitted for the brevity
     }
}

そしてConfigure方法:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider provider)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseCors("ApiCorsPolicy");
    app.UseHttpsRedirection();
    app.UseAuthentication();
    app.UseMvc();
}

0

Corsサービスを追加するときは.SetIsOriginAllowed((host) => true).WithOrigins("http://localhost:4200")

services.AddCors(options => {
            options.AddPolicy("mypolicy",builder => builder
            .WithOrigins("http://localhost:4200/")
            .SetIsOriginAllowed((host) => true)
            .AllowAnyMethod()
            .AllowAnyHeader());
  });

0

.NET CORE 3.1の場合

最良の方法は、起点パスをapp.settingsファイルに保存することです

"Origins": {
    "Server": "http://localhost:5001/",
    "Client": "http://localhost:4200/",
    "CorsOrigins": "http://localhost:4200,http://localhost:5001"
}

ConfigureServicesメソッドで構成セクションからの起源を定義します

services.AddCors(
            options => options.AddPolicy(
                PolicyNames.AllowOrigins,
                builder => builder
                    .WithOrigins(
                        Configuration["Origins:CorsOrigins"]
                            .Split(",", StringSplitOptions.RemoveEmptyEntries)
                            .Select(s => s.TrimEnd('/'))
                            .ToArray()
                    )
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials()
            )
        );

最後に、Configureメソッドでcorsを使用するだけです(使用順は関係ありません!)

app.UseCors(PolicyNames.AllowOrigins);     //Enable CORS!
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.