Keycloak angular No存在"Access-Control-Allow-Origin"标题

Question

我已经将keycloak与角度应用程序集成在一起.基本上,前端和后端都在不同的服务器上.Backend应用程序在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头,因此您必须手动配置它们,并且一旦这样做,并在成功初始化后调用keycloak.getUserInfo - 您将获得双CORS头,这不是允许.

在keycloak邮件列表的深处,你需要在keycloak.json中设置enable-cors = true,但是在keycloak.gitbooks.io上没有任何关于它的内容.所以似乎不是真的.

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

它似乎也是,您不应该触摸WildFly配置来提供CORS标头.

此外,OIDC中的CORS是一个特殊的KeyCloak功能(而不是bug).

希望这个答案对你有好处.

Answer 2

请务必注意,将Web源设置为"*"会打开一个巨大的安全漏洞.它允许来自任何域的任何脚本在该用户的浏览器中代表用户发出请求.

每当您发现自己以这种方式禁用安全功能时,您需要考虑安全功能存在的原因.

请参阅Keycloak文档的8.1.1节

Answer 3

我遇到了同样的问题，（至少）对于 Keycloak Server 8.0.1 版，您可以添加“+”作为“Web Origins”字段的输入，这似乎是最佳选择。

'+' 效果应该与添加（见下面的截图）' http://localhost:4200 ' 作为 'Web Origins' 条目相同。

这就是“Web Origins”字段工具提示所说的：

“允许的 CORS 来源。要允许“有效重定向 URI”的所有来源，请添加“+”。要允许所有来源，请添加“*”。（见下面的截图）

Keycloak 客户端 Web 源设置

Answer 4

我有同样的 CORS 错误。KeyCloak 的新手。尝试将 web-origin 设置为 '*'、'+' 和特定的 url。没有任何效果。直到我将客户端设置上的“访问类型”更改为公开。然后将 web-origin 设置为特定 url 和 + 的两个选项都有效。由于将其设置为 * 不安全，所以没有尝试。

当访问类型设置为机密时，它再次开始出现 CORS 错误。我正在尝试使用 PKCE（代码流）进行授权流。

使用版本 10.0.2。

有效设置的屏幕截图：

Answer 5

这是一个相当老的问题，但无论如何我都会回答它。它可能对某人有帮助。在 keycloak 管理页面中转到clients->your client. 您可以在下面看到一个名为 的字段web origins。在那里您输入您的网址，您的问题将得到解决。

Answer 6

对我有用的解决方案是将Web Origins URL（不是我的客户端，不是Realm）设置为例如：http://localhost:3000/到http://localhost:3000（注意最后没有/）。这样，您就不会使用来将其打开到所有URL *。