2017-07-12 1 views
2

I Possède un porte-clés intégré avec une application angulaire. Fondamentalement, à la fois frontend et backend sont sur le serveur différent. L'application Backend est en cours d'exécution sur apache Tomcat 8. L'application Frontend est en cours d'exécution sur le dossier de contenu de bienvenue JBoss.Keycloak angular Aucun en-tête 'Access-Control-Allow-Origin' n'est présent.

config angulaire

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'); 
}]); 

Demande d'en-tête

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 

d'erreur sur la console 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 filtre sur backend

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

Avez-vous activé [CORS] (http://tomcat.apache.org/tomcat-8.0-doc/config/filter.html#CORS_Filter) sur le serveur exécutant le back-end? – urbz

+0

Oui. vérifiez à nouveau la question. Question mise à jour il semble que ça ne passe pas. – boycod3

+0

@ boycod3 Avez-vous résolu le problème? –

Répondre

5

je luttais avec KeyCloak et CORS et tout cela pendant environ deux semaines, ce qui est ma solution (pour keycloak 3.2.1):

Tout sur la configuration du serveur KeyCloak. Il semble être, que WebOrigin de votre domaine doit être

*
Une seule origine "*".

C'est tout ce qui était nécessaire pour moi.

Si vous entrez votre serveur en tant que WebOrigin, le problème commence. Lorsque vous appelez keycloak.init en JavaScript, keycloak ne génère pas d'en-têtes CORS, vous devez donc les configurer manuellement, et dès que vous appelez keycloak.getUserInfo après une initialisation réussie - vous obtenez deux en-têtes CORS, ce qui est interdit.

Quelque part au fond des listes de diffusion keycloak est indiqué, que vous devez définir enable-cors = true dans votre keycloak.json, mais il n'y a rien à ce sujet sur keycloak.gitbooks.io. Donc, cela ne semble pas être vrai.

Ils ne mentionnent pas non plus CORS lors de la description de JavaScript et les adaptateurs Node.Js, et je ne sais pas pourquoi, ne semble pas être important du tout.

Il semble également que vous ne devriez pas toucher à la configuration de WildFly pour fournir des en-têtes CORS. En outre, CORS dans OIDC est une fonction KeyCloak spéciale (et pas un bogue).

J'espère que cette réponse vous sera utile.

+0

La définition de WebOrigin to * résout mon problème. – boycod3

+0

'enable-cors' est décrit et expliqué dans la documentation de Keycloak dans la section des adaptateurs Java. –

0

Vous avez donné la réponse à votre propre question en ajoutant WebOrigin as * au niveau client (PAS au niveau du domaine!), Ce qui a fonctionné pour vous, mais dans mon cas, ce n'est pas le cas. En fait, supprimer le * était l'astuce pour moi, car KC a envoyé deux fois les en-têtes CORS - l'enlever, l'enlever à la fois ...

Grâce à votre réponse, j'ai heureusement trouvé la réponse à mes problèmes ...

Nous sommes tous d'accord sur le fait que la documentation de KC est au moins très mauvaise.

Il est écrit pour les nuls, mais .... nous ne sommes pas des mannequins, ni le sujet est ...

Il n'explique pas les détails techniques. Par exemple, quelles sont les réponses des points de terminaison. La recherche sur le web (deux semaines) donne un peu - mais pourquoi n'est-elle pas présentée dans la documentation?

Un exemple. Mais j'ai plusieurs ...

Pouvons-nous aider avec la documentation?

+0

Bien sûr, vous pouvez nous aider, tout est Open Source, envoyez vos demandes de tirage à https://github.com/keycloak/keycloak-documentation, nous serons plus heureux que nous de l'examiner. –

0

Il est important de noter que le réglage de votre origine Web sur "*" ouvre un trou de sécurité béant. Il permet à n'importe quel script de n'importe quel domaine de faire des demandes au nom d'un utilisateur, dans le navigateur de cet utilisateur.

Chaque fois que vous vous trouvez en train de désactiver une fonctionnalité de sécurité de cette manière, vous devez prendre en compte les raisons pour lesquelles la fonction de sécurité existe.

Voir section 8.1.1 of the Keycloak docs