我已经集成了带角度应用程序的按键斗篷。基本上,前端和后端都在不同的服务器上。后端应用程序在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() { } }
我与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)。
希望这个答案对您有帮助。