Keycloak角度不存在"Access-Control-Allow-Origin"标头 [英] Keycloak angular No 'Access-Control-Allow-Origin' header is present

问题描述

我已经将Keycloak与angular应用程序集成在一起.基本上，前端和后端都在不同的服务器上.后端应用程序在apache tomcat 8上运行.前端应用程序在JBoss欢迎内容文件夹上运行.

I Have integrated keycloak with an angular app. Basically, both frontend and backend are on different server.Backend app is running on apache tomcat 8. Frontend app is running on JBoss welcome content folder.

角度配置

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

网络控制台上的错误.

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() {
    }
}

推荐答案

我与KeyCloak和CORS进行了大约两个星期的战斗，这就是我的解决方案(针对3.2.1的密钥斗篷):

I was fighting with KeyCloak and CORS and all of this for about two weeks, and this is my solution (for keycloak 3.2.1):

所有有关配置KeyCloak服务器的信息. 看来，您的境界的WebOrigin必须为

Its all about configuring KeyCloak server. It seems to be, that WebOrigin of your Realm needs to be

*

只有一个原点"*".

Only one origin "*".

仅此而已，这是我所需要的.

Thats all, what was needed for me.

如果以WebOrigin输入服务器，则麻烦开始了. 当您在JavaScript中调用keycloak.init时，keycloak不会生成CORS标头，因此您必须手动对其进行配置，并在成功初始化后立即调用keycloak.getUserInfo-您将获得双CORS标头，而不是允许.

If you enter your server as WebOrigin, the trouble begins. When you call keycloak.init in JavaScript, keycloak does not generate CORS headers, so you have to configure them manually, and as soon as you do so, and call keycloak.getUserInfo after successful init - you get double CORS headers, which is not allowed.

在keycloak邮件列表的深处指出，您需要在keycloak.json中设置enable-cors = true，但是keycloak.gitbooks.io上没有任何相关规定.因此，似乎并非如此.

Somewhere deep inside of keycloak mailing lists is stated, that you need to set enable-cors=true in your keycloak.json, but there is nothing about that on keycloak.gitbooks.io. So it seems not to be true.

在描述JavaScript和Node.Js适配器时，他们也没有提到CORS，而且我也不知道为什么，这似乎根本不重要.

They also don't mention CORS when describing JavaScript and Node.Js adapters, and I don't know why, seems not to be important at all.

似乎也不应触摸WildFly配置来提供CORS标头.

It also seems to be, that you should not touch WildFly configuration to provide CORS headers.

此外，OIDC中的CORS是KeyCloak的一项特殊功能(不是bug).

Besides, CORS in OIDC is a special KeyCloak feature (and not a bug).

希望这个答案对您有帮助.

Hopefully this answer serves you well.

这篇关于Keycloak角度不存在"Access-Control-Allow-Origin"标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！