ASP.net Core WebAPI で CORS を有効にする方法 質問する

ASP.net Core WebAPI で CORS を有効にする方法 質問する

私がやろうとしていること

Azure Free Plan (でホストされているバックエンドのASP.Net Core Web APIがあります).Net Core にデフォルトのセキュリティ ヘッダーを追加する)。

また、その API を使用するクライアント Web サイトもあります。クライアント アプリケーションは Azure ではなく、Github Pages またはアクセスできる別の Web ホスティング サービスでホストされます。このため、ドメイン名が一致しません。

これを調べてみると、Web API 側で CORS を有効にする必要がありますが、数時間にわたってあらゆることを試しましたが、うまくいきません。

クライアントの設定方法これはReact.jsで書かれた単純なクライアントです。JqueryのAJAXを介してAPIを呼び出しています。Reactサイトは機能しているので、それが原因ではないことはわかっています。Jquery API呼び出しは、試行1で確認したとおりに機能します。呼び出し方法は次のとおりです。

    var apiUrl = "http://andrewgodfroyportfolioapi.azurewebsites.net/api/Authentication";
    //alert(username + "|" + password + "|" + apiUrl);
    $.ajax({
        url: apiUrl,
        type: "POST",
        data: {
            username: username,
            password: password
        },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var authenticatedUser = JSON.parse(response);
            //alert("Data Loaded: " + authenticatedUser);
            if (onComplete != null) {
                onComplete(authenticatedUser);
            }
        },
        error: function (xhr, status, error) {
            //alert(xhr.responseText);
            if (onComplete != null) {
                onComplete(xhr.responseText);
            }
        }
    });

私が試したこと


試み1 - 「正しい」方法

https://learn.microsoft.com/en-us/aspnet/core/security/cors

私は、Microsoft Web サイトのこのチュートリアルに忠実に従い、Startup.cs でグローバルに有効にする、すべてのコントローラーに設定する、すべてのアクションで試すという 3 つのオプションをすべて試しました。

この方法に従うと、クロス ドメインは機能しますが、単一のコントローラー上の単一のアクション (AccountController への POST) でのみ機能します。その他すべてについては、Microsoft.AspNetCore.Corsミドルウェアはヘッダーの設定を拒否します。

NUGET経由でインストールしましたMicrosoft.AspNetCore.Corsが、バージョンは1.1.2

Startup.csでの設定方法は次のとおりです。

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        // Add Cors
        services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        }));

        // Add framework services.
        services.AddMvc();
        services.Configure<MvcOptions>(options =>
        {
            options.Filters.Add(new CorsAuthorizationFilterFactory("MyPolicy"));
        });

        ...
        ...
        ...
    }

    // This method gets called by the runtime. Use this method to configure 
    //the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env,
    ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        // Enable Cors
        app.UseCors("MyPolicy");

        //app.UseMvcWithDefaultRoute();
        app.UseMvc();
        
        ...
        ...
        ...
    }

ご覧のとおり、私は言われた通りにすべてやっています。私は2回ともMVCの前にCorsを追加し、それがうまくいかなかったときは、[EnableCors("MyPolicy")]すべてのコントローラーにCorsを追加しようとしました。

[Route("api/[controller]")]
[EnableCors("MyPolicy")]
public class AdminController : Controller

試み2 - ブルートフォース攻撃

https://andrewlock.net/aspnet-core にデフォルトのセキュリティ ヘッダーを追加する/

前回の数時間の試行の後、ヘッダーを手動で設定して、すべての応答で強制的に実行することで、ブルートフォース攻撃を試みることに決めました。私は、すべての応答にヘッダーを手動で追加する方法に関するこのチュートリアルに従ってこれを実行しました。

これらは私が追加したヘッダーです

.AddCustomHeader("Access-Control-Allow-Origin", "*")
.AddCustomHeader("Access-Control-Allow-Methods", "*")
.AddCustomHeader("Access-Control-Allow-Headers", "*")
.AddCustomHeader("Access-Control-Max-Age", "86400")

これらは私が試した他のヘッダーですが、失敗しました

.AddCustomHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE")
.AddCustomHeader("Access-Control-Allow-Headers", "content-type, accept, X-PINGOTHER")
.AddCustomHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Host, User-Agent, Accept, Accept: application/json, application/json, Accept-Language, Accept-Encoding, Access-Control-Request-Method, Access-Control-Request-Headers, Origin, Connection, Content-Type, Content-Type: application/json, Authorization, Connection, Origin, Referer")

この方法では、クロスサイトヘッダーが適切に適用され、開発者コンソールとPostmanに表示されます。ただし、問題は、チェックは通過しますが、Webブラウザが(おそらく)次Access-Control-Allow-Originのようにヒステリーを起こします。Access-Control-Allow-Headers415 (Unsupported Media Type)

つまり、力ずくの手段も機能しないのだ


ついに

誰かこれを動作させて手助けしてくれる人、または正しい方向を指し示してくれる人はいませんか?


編集

そのため、API 呼び出しを実行するには、JQuery の使用をやめて、純粋な JavascriptXMLHttpRequest形式に切り替える必要がありました。

試行 1

Microsoft.AspNetCore.CorsMindingData の回答に従って を動作させることができましたが、メソッド内で の前にConfigureを置く必要がありました。app.UseCorsapp.UseMvc

さらに、Javascript API ソリューションと組み合わせると、options.AllowAnyOrigin()ワイルドカード サポートも機能し始めました。

試行2

そこで、試行 2 (ブルート フォース) を機能させることに成功しました... 唯一の例外は、ワイルドカードがAccess-Control-Allow-Origin機能しないため、アクセスできるドメインを手動で設定する必要があることです。

明らかに理想的ではないのですが、このWebAPIをすべての人に広く公開したいだけですが、少なくとも別のサイトでは機能しているので、これは始まりです。

app.UseSecurityHeadersMiddleware(new SecurityHeadersBuilder()
    .AddDefaultSecurePolicy()
    .AddCustomHeader("Access-Control-Allow-Origin", "http://localhost:3000")
    .AddCustomHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, PATCH, DELETE")
    .AddCustomHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Content-Type, Authorization"));

ベストアンサー1

非常に単純な CORS ポリシー (XXX ドメインからのすべてのリクエストを許可する) があるため、それほど複雑にする必要はありません。まず、次の操作を実行してみてください (CORS の非常に基本的な実装)。

まだインストールしていない場合は、CORS nuget パッケージをインストールしてください。

Install-Package Microsoft.AspNetCore.Cors

startup.cs の ConfigureServices メソッドに、CORS サービスを追加します。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(); // Make sure you call this previous to AddMvc
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}

次に、startup.cs の Configure メソッドに次のコードを追加します。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    // Make sure you call this before calling app.UseMvc()
    app.UseCors(
        options => options.WithOrigins("http://example.com").AllowAnyMethod()
    );

    app.UseMvc();
}

さあ、試してみましょう。ポリシーは、異なるアクション (異なるホストや異なるヘッダーなど) に対して異なるポリシーが必要な場合に使用します。簡単な例では、実際には必要ありません。この簡単な例から始めて、必要に応じて調整してください。

参考文献 :http://dotnetcoretutorials.com/2017/01/03/enable-cors-asp-net-core/ を参照してください。

おすすめ記事