我已经将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() { } }
解决方法
我和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).
希望这个答案对你有好处.