web-dev-qa-db-ja.com

Keycloak angular No 'Access-Control-Allow-Origin' header is present

Keycloakをangularアプリと統合しました。基本的に、フロントエンドとバックエンドの両方が異なるサーバーにあります。バックエンドアプリはApache Tomcat 8で実行されています。フロントエンドアプリはJBossウェルカムコンテンツフォルダーで実行されています。

角度設定

angular.element(document).ready(function ($http) {
    var keycloakAuth = new Keycloak('keycloak.json');
    auth.loggedIn = false;
    keycloakAuth.init({ onLoad: 'login-required' }).success(function () {
        keycloakAuth.loadUserInfo().success(function (userInfo) {
            console.log(userInfo);  
        });
        auth.loggedIn = true;
        auth.authz = keycloakAuth;
        auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/app1/protocol/openid-connect/logout?redirect_uri=http://35.154.214.8/hrms-keycloak/index.html";
        module.factory('Auth', function() {
            return auth;
        });
        angular.bootstrap(document, ["themesApp"]);
    }).error(function () {
            window.location.reload();
        });

});
module.factory('authInterceptor', function($q, Auth) {
    return {
        request: function (config) {
            var deferred = $q.defer();
            if (Auth.authz.token) {
                Auth.authz.updateToken(5).success(function() {
                    config.headers = config.headers || {};
                    config.headers.Authorization = 'Bearer ' + Auth.authz.token;
                    deferred.resolve(config);
                }).error(function() {
                        deferred.reject('Failed to refresh token');
                    });
            }
            return deferred.promise;
        }
    };
});
module.config(["$httpProvider", function ($httpProvider)  {
    $httpProvider.interceptors.Push('authInterceptor');
}]);

リクエストヘッダー

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:35.154.214.8:8080
Origin:http://35.154.214.8
Referer:http://35.154.214.8/accounts-keycloak/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Webコンソールのエラー。

XMLHttpRequest cannot load http://35.154.214.8:8080/company/loadCurrencyList. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://35.154.214.8' is therefore not allowed access.

バックエンドのCorsフィルター

@Component
public class CORSFilter implements Filter {
    static Logger logger = LoggerFactory.getLogger(CORSFilter.class);

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "*");
        chain.doFilter(request, response);
    }

    public void destroy() {
    }
}
angularjskeycloak
12
boycod3

私はKeyCloakとCORSとこれらのすべてと約2週間戦っていましたが、これが私の解決策です（keycloak 3.2.1の場合）：

KeyCloakサーバーの構成に関するすべて。あなたのレルムのWebOriginは

*

以上、私に必要なもの。

サーバーをWebOriginとして入力すると、トラブルが始まります。 JavaScriptでkeycloak.initを呼び出すと、keycloakはCORSヘッダーを生成しないため、手動で設定する必要があります。また、初期化が成功した後すぐにkeycloak.getUserInfoを呼び出す必要があります。許可された。

Keycloakメーリングリストの奥深くのどこかに、keycloak.jsonでenable-cors = trueを設定する必要があると記載されていますが、keycloak.gitbooks.ioには何もありません。だからそれは真実ではないようです。

また、JavaScriptおよびNode.Jsアダプターについて説明する際にCORSについても言及していません。なぜ重要なのかはまったくわかりません。

また、WildFlyの構成に触れてCORSヘッダーを提供するべきではないようです。

さらに、OIDCのCORSは特別なKeyCloak機能です（バグではありません）。

この回答がお役に立てば幸いです。

15
subrob sugrobych

Web Originを「*」に設定すると、セキュリティホールが大きく開くことに注意してください。これにより、任意のドメインのスクリプトが、ユーザーのブラウザ内でユーザーに代わってリクエストを行うことができます。

このような方法でセキュリティ機能を無効にしている場合は、セキュリティ機能が存在する理由を考慮する必要があります。

セクションを参照してください Keycloakドキュメントの8.1.1

16
GuyPaddock

私のために働いた解決策は、Web Origins URL（Realmではなく、クライアントの）をたとえばhttp://localhost:3000/からhttp://localhost:3000に設定することでした（最後に/がないことに注意してください） 。この方法では、*を使用してすべてのURLに開くわけではありません。

4
Juan Espinosa

あなたはあなた自身の質問に答えて、WebOriginをクライアントレベルで*として追加しました（レルムレベルではありません！）、それはあなたのために働きましたが、私の場合はそうではありませんでした。実際、KCがCORSヘッダーを2回送信したため、*を削除することが私にとってのトリックでした。

あなたの答えのおかげで、幸運にも私の問題に関する答えを見つけました...

私たち全員が同意しているのは、KCのドキュメントが少なくとも非常に貧弱だということです。

それはダミーのために書かれていますが、....私たちはダミーではなく、どちらの主題も...

技術的な詳細は説明しません。たとえば、エンドポイントからの応答は何ですか。 Webの検索（2週間）には少し時間がかかりますが、ドキュメントに記載されていないのはなぜですか？

一例。しかし、私はいくつかあります...

ドキュメントを手伝ってもらえますか？

3
Dutchboy

私は同じ問題を抱えていましたが、私の場合、keycloak js adapter creationでオプションオブジェクトを使用していたため、認証サーバーへのURLがhttpsではなくhttpに誤って設定されていました：

const keycloak = Keycloak({
    url: 'http://my-keycloak-auth-server/auth',
    realm: 'myRealm',
    clientId: 'myClient'
});

しかし、正しかった

const keycloak = Keycloak({
    url: 'https://my-keycloak-auth-server/auth',
    realm: 'myRealm',
    clientId: 'myClient'
});
1
jschmuecking

Angular 6、REST Webサービス、およびKeycloakのSpring Boot。

キークロークアドレス：KEYCLOAK
Angular 6アプリのアドレス：ANGULAR_APP
2 REST KeycloakとSpring Autoconfigurationで保護されたWS：AA、BB

フローは：Angular App request（GET）AA、AA request（GET）BB

XMLHttpRequestエラーの使用は次のようなものでした：AAをロードできません。プリフライトリクエストへの応答がアクセスコントロールチェックに合格しません。リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン 'ANGULAR_APP'はアクセスを許可されていません。

Observable from Angular was was：Failed to load AA：Redirect to 'BB' to 'KEYCLOAK' block by has CORS policy：No 'Access-Control-Allow-Origin' header is presentオリジン 'ANGULAR'はアクセスが許可されていません。

Webの起源で試した：*解決策なし

Keycloakが問題を引き起こしたリダイレクトを実行した理由を知らなかった

サービスAAのセキュリティをKeycloak + AutoconfigureからKeycloak + Spring Securityに切り替えたときに問題が魔法のように消えました： https://developers.redhat.com/blog/2017/05/25/easily-secure-your- spring-boot-applications-with-keycloak /

このために多くの睡眠を失いました。誰かが似たようなものに直面した場合に備えて、これを残してください。

1
Galo