angularjs - Keycloak angular No 'Access-Control-Allow-Origin' header 存在

Question

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

Angular 配置

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

Answer 1

我与 KeyCloak 和 CORS 以及所有这些战斗了大约两周，这是我的解决方案(对于 keycloak 3.2.1):

这完全是关于配置 KeyCloak 服务器。
看来，你的领域的 WebOrigin 需要是 *
只有一个来源“*”。

就是这样，我需要什么。

如果您将服务器输入为 WebOrigin，麻烦就来了。
当您在 JavaScript 中调用 keycloak.init 时，keycloak 不会生成 CORS header ，因此您必须手动配置它们，并且一旦这样做，并在成功初始化后调用 keycloak.getUserInfo - 您将获得双 CORS header ，这不是允许。

在 keycloak 邮件列表深处的某个地方指出，您需要在 keycloak.json 中设置 enable-cors=true，但在 keycloak.gitbooks.io 上没有任何相关内容。所以这似乎不是真的。

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

似乎您不应该触摸 WildFly 配置来提供 CORS header 。

此外，OIDC 中的 CORS 是一个特殊的 KeyCloak 功能(而不是错误)。

希望这个答案对你有用。