title: Keycloak angular No 'Access-Control-Allow-Origin' header is present
body: <p>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.</p>
  
  <p><strong>Angular config</strong></p>
  
  <pre><code>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');
  }]);
  </code></pre>
  
  <p><strong>Request Header</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <p><strong>Error on web console.</strong></p>
  
  <pre><code>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.
  </code></pre>
  
  <p><strong>Cors filter on backend</strong></p>
  
  <pre><code>@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() {
      }
  }
  </code></pre>