CORSエラーの回避方法がわかりません

Question

実現したいこと

開発環境においてCORSエラーを回避したい

発生している問題・分からないこと

Angular, ASP.NET Core Web API, Keycloakを用いたSAML2認証を組み合わせたアプリケーションにおいてCORSのエラーが発生しています。どうすれば回避できるのでしょうか?

エラーメッセージ中の以下のアドレスは次に対応します。
https://localhost:4200 : フロントエンド側(Angular)のアドレス
https://localhost:7055 : バックエンド側(ASP.NET Core Web API)のアドレス
https://localhost:8443 : Keycloakのアドレス

エラーメッセージ

Access to XMLHttpRequest at 'https://localhost:8443/realms/(realm name)/protocol/saml?SAMLRequest=fJFNa8MwDIbvhf4H43tnx%2FloKpJAWBkUukuz7rCbk7ok4NiZ5ezj3y%2Ft2rHB6EUHSY%2F0vlKGstdigHL0rdmp11GhJx%2B9NgjflZyOzoCV2CEY2SsE30BVPm5B3HEYnPW2sZr%2BZm4jElE531lDyWad0%2B5QcyGSY5MeQnWMgiCp64Qn6TJK60REqyCg5Fk5nICcTvxEIY5qY9BL46cUF9GCrxY8eQo4xCEE4oWS9WSjM%2FK0Jqet9wMCY9o2UrcWPaRRFDKnpO6RVZ%2F4oO07u1phJw%2BUlFeZ99bg2CtXKffWNWq%2F2%2F43ccnjmFUn95dYNkiL%2BYyQ7HwTOKt2xS0yO6%2F%2BaZ3PLom%2F3ym%2BAAAA%2F%2F8DAA%3D%3D&RelayState=fHLe6EsBVGLe6Gh3cn9mzROQ' (redirected from 'https://localhost:7055/account/UserInfo') from origin 'https://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogging(loggingBuilder =>
{
    loggingBuilder.AddConsole();
    loggingBuilder.AddDebug();
    loggingBuilder.SetMinimumLevel(LogLevel.Debug);
});

#if DEBUG
// CORSの有効化(開発時のみ)
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("https://localhost:4200", "https://localhost:8443")
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
});
#endif

// Add services to the container.

// 分散キャッシュの設定
builder.Services.AddDistributedPostgreSqlCache(options =>
{
    options.ConnectionString = builder.Configuration.GetConnectionString("FlowDb");
    options.SchemaName = "public";
    options.TableName = "TestCache";
    options.DisableRemoveExpired = false;
    options.ExpiredItemsDeletionInterval = TimeSpan.FromMinutes(30);
});

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = Saml2Defaults.Scheme;
})
.AddCookie()
.AddSaml2(options =>
{
    var entityId = builder.Configuration["Saml2:entityId"];
    var idpEntityId = builder.Configuration["Saml2:idpEntityId"];
    var metadataUrl = builder.Configuration["Saml2:IdpMetadataURL"];

    options.SPOptions.EntityId = new Sustainsys.Saml2.Metadata.EntityId(entityId);
    options.SPOptions.AuthenticateRequestSigningBehavior = Sustainsys.Saml2.Configuration.SigningBehavior.Never;
    options.SPOptions.PublicOrigin = new(entityId ?? String.Empty);
    var idp = new Sustainsys.Saml2.IdentityProvider(
        new Sustainsys.Saml2.Metadata.EntityId(idpEntityId),
        options.SPOptions)
    {
        MetadataLocation = metadataUrl,
        LoadMetadata = true,
    };
    options.IdentityProviders.Add(idp);
});

builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("Saml2", policy =>
    {
        policy.RequireClaim(ClaimTypes.NameIdentifier);
    });
});

builder.Services.AddControllers();
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

var app = builder.Build();

// Configure the HTTP request pipeline.

app.UseHttpsRedirection();
app.UseSession();

#if DEBUG
// CORSの有効化(開発時のみ)
app.UseCors(MyAllowSpecificOrigins);
#endif

app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Endpoints } from '../constants/endpoints';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  get<T>(endpoint: string): Observable<T> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
      })
    };

    return this.http.get<T>(Endpoints.getUrl(endpoint), httpOptions);
  }

  post<T>(endpoint: string, body: any | null): Observable<T> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
      })
    };

    return this.http.post<T>(Endpoints.getUrl(endpoint), body, httpOptions);
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

検索結果に従ってAngularからのHTTP GETのヘッダーに'Access-Control-Allow-Origin': '*'を追加したり、ASP.NET Core Web API側にAddCorsメソッドとUseCorsメソッドの呼び出しも追加しましたが解消できていません。

補足

バージョンは以下の通りです
.NET: 8
Angular: 18
Keycloak: 25

Keycloakでは、Valid redirect URIsに「https://localhost:7055/*」と「https://localhost:4200/*」を指定しています。

Comments

[qafchel]

いろいろ試しているところ、ログイン状態でないために自動的にKeycloakサーバーへのリダイレクトが発生しているときに「https://localhost:4200」から「https://localhost:8443」へのリダイレクトになっていて、そこでエラーが発生している感じのようです。

[qafchel]

上記のリダイレクトを許可するように設定したいのですが今市ピンとくる方法が見当たりません。このことについては「https://teratail.com/questions/9dclikyk6t04r3」として別の質問を立てました。

[hqf00342]

エラーメッセージに書いてある通りですが、Access-Control-Allow-Originを付けるべきはkeycloakであってAngularでもASP.NETでもありません。（ASP.NETにはこのエラーとは別に必要です）
OpenID connectならkeycloakの場合WebOriginsに設定すればつけられると思いますが
SAMLで非同期通信はやったことが無いのでお役には立てそうにないです。

[qafchel]

hqf00342さんご返答ありがとうございます。
おっしゃる通りAngular側からの呼び出しにおいてAccess-Control-Allow-Originを設定する必要がないことが分かったため、自己解決に記述したようにAngular側での処理からは除外するようにしました。
Keycloakでの設定では、バージョンが25だからなのかWeb Originsの設定項目を見つけることはできませんでした。その代わりにquarkus.propertiesに"https://ja.quarkus.io/guides/security-cors"に記述された設定項目に対する設定を追加することで行えそうという感じではありました。ただ、実際にはKeycloakへの暗黙的なリダイレクトを抑える方向で解決するようにしましたのでKeycloakへの設定は行いませんでした。

Answer 1

自己解決になりますが、以下の変更を行うことで回避することができました。

1. Angular側において、以下の内容でsrc/proxy.conf.jsonを作成し、

   {
     "/api": {
       "target": "https://localhost:7055",
       "secure": false,
       "pathRewrite": {
         "^/api": ""
       },
       "logLevel": "debug"
     }
   }
   

   このファイルをangular.jsonの$.projects.(Angularプロジェクト名).architect.serve.optionsの下に

   "serve": {
     "proxyConfig": "src/proxy.conf.json"
   }
   

   と指定しました。

2. Angular側からのASP.NET Web API側にあるAPIの呼び出しについて、ログイン処理のようにSAML2のIdpへのリダイレクトが行われる可能性があるものについてはHttpClient.get等ではなく、

   window.location.href = /api/account/login
   

   のようにwindow.location.hrefに設定する方式をとるように変更した。

3. ASP.NET Web API側のコントローラーについて、暗黙的なSAML2のIdpへのリダイレクトが行われるのを避けるため、Authorize属性を付与しないように変更した。ログイン中かどうかの判定は各メソッドでUser.Identity.IsAuthenticatedの値をチェックするようにした。

また問題の解決とは別に、https://teratail.com/questions/256773等の記述から、クライアントからの呼び出しにおいてヘッダーへのAccess-Control-Allow-Originの付与にメリットはないとのことから、Angular側におけるhttp.service.tsから当該処理を削除しました。