Ajaxリクエストで別ドメインのWeb APIを呼び出す方法（CORS）

ASP.NETで別ドメインのWeb APIを呼び出す方法（CORS）についてです。

Ajaxリクエストを行う場合、デフォルトでは別ドメインのAPIに対してリクエストしてもエラーではじかれてしまいます。

これはセキュリティ上の理由からそのような動作になっているのですが、開発時でもそのままでは「localhost:1234」から「localhost:5678」にAjaxでアクセスすることはできません。

対策していない場合、別ドメインにAjaxリクエストを行うとブラウザのコンソールに以下のようなエラーが出力されます。

Failed to load http://localhost:5678/api/example: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1234' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

エラーを回避してAjaxリクエストに対するレスポンスを返すためには、Web API側での設定（CORSの有効）が必要になります。以下はその方法。

CORSを有効にするにはいくつか方法があります。

まずミドルウェアとして対応する場合、Web API側でプロジェクト作成時に作られた「Startup.cs」を以下のように修正します。

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();     // 追加
    services.AddMvc();
}

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

    app.UseCors(builder => builder.WithOrigins("http://localhost:1234"));   // 追加
    app.UseMvc();
}

上記の設定では、「localhost:1234」からのリクエストだけ許可されます。

とりあえずすべて許可したい場合は「app.UseCors」の行を以下のようにします。

app.UseCors(builder => builder
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader());

CORSに有効にする方法はいくつかあって、コントローラー単位やメソッド単位で設定することも可能です。

詳しくはこちらを確認してください。

• c# - How to enable CORS in ASP.NET Core - Stack Overflow