web-dev-qa-db-ja.com

keycloak：要求されたリソースに 'access-control-allow-origin'ヘッダがありません

Angular 8.0.3とKeycloak 6.0.1を使用してフロント認証を行います。

問題

アプリケーションからKeycloakログインページにアクセスできました。ログイン詳細をログインした後、エラーが発生します。
[。] - localhost /：1 XMLHTTPRequest at ' https：// localhost：8080/auth/realms/pwe-realm/protocol/openid-connect/token ' from origin ' - http：// localhost：42 'はCORSポリシーによってブロックされています。要求されたリソースには' access-control-aligh-origin 'ヘッダがありません。
[。] - keycloak initに失敗しましたkeycloakの初期化中にエラーが発生しました。

私を手伝ってくれますか ？

マイkeycloak構成：

1レルム：Pwe-Realm
[。] 2クライアント：
[。] - PWE-API（私のバックエンドのための）
[。] - PWE-WEB（認証用フロントエンド用）

pWE-WEB設定：
[。]クライアントプロトコル：OpenID-Connect
[。]アクセスタイプ：Public.
[。]有効な辞書URI：http //：localhost：4200 /（私も "*"を試してみました）

私のコード（このライブラリairyを使用しています: keycloak-angular ）:

環境。

_import {KeycloakConfig} from 'keycloak-angular';

const keycloakConfig: KeycloakConfig = {
  url: 'https://localhost:8080/auth',
  realm: 'pwe-realm',
  clientId: 'pwe-web'
};

export const environment = {
  production: false,
  keycloakConfig
};
_

app.moudle.ts

_//imports

const keycloakService = new KeycloakService();

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    KeycloakAngularModule,
    BrowserModule,
    AppRoutingModule,
    ...
  ],
  providers: [
    {
      provide: KeycloakService,
      useValue: keycloakService,
    }
  ],
  entryComponents: [AppComponent]
})
export class AppModule implements DoBootstrap {
  async ngDoBootstrap(app) {
    const { keycloakConfig } = environment;

    try {
      await keycloakService.init({ config: keycloakConfig });
      app.bootstrap(AppComponent);
    } catch (error) {
      console.error('Keycloak init failed', error);
    }
  }
}
_
angularauthenticationxmlhttprequestkeycloakkeycloak-services
5
Ugo vla

LOCALHOST上のサーバーに対してvue.jsを使って開発しながら、これで半日を無駄にしました。

あなたはおそらくあなたのKeycloakクライアントのためにあなたのKeycloak Server上のWeb起源を設定する必要があります：

  1. キーコック管理画面にログインし、レルムPWE-REALMを選択してからクライアントPWE-WEBを選択します。
  2. Web Origin設定までスクロールしてプラス記号を入力します。 （+）ボタンをクリックしないでくださいが、文字通り+を入力してください。これにより、上で定義したすべての有効リダイレクトURIがWeb Originsヘッダーに追加されます。また、angularアプリケーションのURIを有効なリダイレクトURIリストに追加する必要があります。
  3. 画面下部に保存を押します。

すぐに動作するはずです。

1
Robin

CORS関連の問題については、Web Originsを設定する必要があります。オフオオションの使用は正式な文書です。

Web由来

このオプションは、Origin Resource Sharingを表すCorsを中心にしています。ブラウザのJavaScriptが、ドメインが1つのJavaScriptコードから異なるサーバーへのAJAX HTTP要求を試みると、要求はCORを使用する必要があります。サーバーは特別な方法でCORS要求を処理する必要があります。それ以外の場合、ブラウザは要求を表示または許可することはできません。このプロトコルは、XSS、CSRF、およびその他のJavaScriptベースの攻撃から保護するためのものです。

Keycloakは検証済みのCORS要求をサポートしています。動作する方法は、クライアントのWeb起源設定にリストされているドメインがクライアントアプリケーションに送信されたアクセストークン内に埋め込まれていることです。クライアントアプリケーションはこの情報を使用して、CORS要求をその上に呼び出すことを許可するかどうかを決定できます。これはOIDCプロトコルの拡張ですので、Keycloakクライアントアダプタのみがこの機能をサポートしています。詳細については、「アプリケーションとサービスガイドの保護」を参照してください。

Web起源データを入力するには、ベースURLを入力して追加する+記号をクリックします。削除したいURLの横にある - サインをクリックします。まだ保存ボタンをクリックする必要があることを忘れないでください。

そのため、クライアントセットの「Web Origins」（または*）を設定します。

1
Subodh Joshi