2022.06.18 2024.04.16

C#でCORSを有効にする方法

hebishima.shogo

はい、hebiです。
C#でCORSを有効にする方法を記事にしたいと思います。

Contents

発端
CORSとは？
CORS有効設定
最後に

発端

C#でcookie認証を行うWebAPIについて記事にしましたが、そのAPIをWebアプリからデバッグ実行した際に、

「"Error: Network Error\n at createError (http://localhost:3000/static/js/bundle.js:2637:15)\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:2022:14)"」

という謎のエラーにより通信に失敗する事象が発生しました。調査していくなかで、CORSというものを有効にする必要があるとのことです。cookie認証について興味ある方は以下を参照ください。

CORSとは？

CORSとはオリジン間リソース共有 (Cross-Origin Resource Sharing)の略で、同一オリジン以外の通信を禁止する機能となります。

同一オリジンとは、以下のようなルールとなっています。

同一プロトコル(httpやhttps)
同一ポート(80や443)
同一ホスト(http://test.co.jp )

デバッグ実行したフロントのURLは「http://localhost:3000」で、デバッグ実行したサーバのURLは「https://localhost:7252」となっており、同一オリジンではないと認識されエラーとなりました。

CORS有効設定

上記のことから、サーバ側で「http://localhost:3000」の通信を許可することで通信を可能にします。

using Microsoft.AspNetCore.Authentication.Cookies;

var builder = Microsoft.AspNetCore.Builder.WebApplication.CreateBuilder(args);

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      policy =>
                      {
#if DEBUG
                          policy.WithOrigins("http://localhost:3000")
                                                  .AllowAnyHeader()
                                                  .AllowAnyMethod();
#endif
                      });
});
// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.SlidingExpiration = true;
        options.Events.OnRedirectToLogin = cxt =>
        {
            // ログイン画面に遷移するのではなくエラーを返す
            cxt.Response.StatusCode = StatusCodes.Status401Unauthorized;
            return Task.CompletedTask;
        };
        options.Events.OnRedirectToAccessDenied = cxt =>
        {
            // エラー画面に遷移するのではなくエラーを返す
            cxt.Response.StatusCode = StatusCodes.Status403Forbidden;
            return Task.CompletedTask;
        };
        options.Events.OnRedirectToLogout = cxt => Task.CompletedTask;
    });

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors(MyAllowSpecificOrigins);
app.UseHttpsRedirection();

app.UseAuthentication(); // 認証を行うために追加
app.UseAuthorization();

app.MapControllers();

app.Run();

5行目~18行目の処理にてhttp://localhost:3000をCORSを有効にすることで通信可能にします。

デバッグ用のため#if DEBUGで囲っており、本番環境で設定が必要な場合はpolicy.WithOriginsにURLを追加します。

53行目のapp.UseCorsで使用するCORS名を指定することでCORSが有効になります。