web-dev-qa-db-fra.com

Keycloak angular Aucun en-tête 'Access-Control-Allow-Origin' n'est présent

J'ai intégré keycloak avec une application angulaire. Fondamentalement, les applications frontale et principale sont sur un serveur différent. L'application Backend s'exécute sur Apache Tomcat 8. L'application Frontend s'exécute sur le dossier de contenu de bienvenue de JBoss.

Angular config 

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

En-tête de demande 

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

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.

Filtre Cors sur le 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() {
    }
}
angularjskeycloak
4
boycod3

Je me suis battu avec KeyCloak et la CORS pendant environ deux semaines, et voici ma solution (pour KeyCloak 3.2.1):

Il s’agit de configurer le serveur KeyCloak ..__ Il semble que WebOrigin de votre royaume doive ê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 à se produire . 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 un lancement réussi - vous obtenez deux en-têtes CORS, ce qui n’est pas autorisé.

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

Ils ne mentionnent pas non plus CORS dans leur description de JavaScript et des adaptateurs Node.Js, et je ne sais pas pourquoi, ne semble pas avoir d'importance 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 fonctionnalité spéciale de KeyCloak (et non un bug).

J'espère que cette réponse vous sert bien.

8
subrob sugrobych

Il est important de noter que définir votre origine Web sur "*" ouvre une brèche de sécurité. 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 désactivez une fonctionnalité de sécurité de cette manière, vous devez déterminer pourquoi cette fonctionnalité existe.

Voir section 8.1.1 de la documentation sur les porte-clés

9
GuyPaddock

Vous avez répondu à votre propre question en ajoutant WebOrigin en tant que * au niveau du client (PAS au niveau du royaume!), Ce qui a fonctionné pour vous, mais dans mon cas, cela n'a pas fonctionné. En fait, enlever le * était le truc pour moi, parce que KC a envoyé les en-têtes de la SCRO à deux reprises - le retirer, le dépouiller une 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 médiocre.

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

Cela n'explique pas les détails techniques. Par exemple, quelles sont les réponses des ordinateurs d'extrémité. La recherche sur le Web (deux semaines) donne un peu - mais pourquoi n’est-ce pas indiqué dans la documentation?

Un exemple. Mais j'ai plusieurs ...

Pouvons-nous aider avec la documentation?

2
Dutchboy

La solution qui a fonctionné pour moi a été de définir l'URL Web Origins (de mon client, pas du royaume), par exemple: http://localhost:3000/ à http://localhost:3000 (notez l'absence de / à la fin). De cette façon, vous n'ouvrez pas toutes les URL à l'aide de *. 

0
Juan Espinosa

A fait face au même problème en travaillant avec Angular 6, Spring Boot pour les services Web REST et KeyCloak.

Adresse du manteau: KEYCLOAK
Adresse angulaire 6: ANGULAR_APP
Deux REST WS sécurisés avec l'autoconfiguration Keycloak et Spring: AA, BB

Le flux était le suivant: Angular Demande d'application (GET) AA, Demande AA (GET) BB

L’utilisation de l’erreur XMLHttpRequest ressemblait à quelque chose comme: Impossible de charger un AA. La réponse à la demande de contrôle en amont ne réussit pas la vérification du contrôle d'accès: aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'origine 'ANGULAR_APP' n'est donc pas autorisée.

Avec Observable depuis Angular, il était: Echec du chargement de AA: la redirection de "BB" vers "KEYCLOAK" a été bloquée par la stratégie CORS: Aucun en-tête "Accès-Contrôle-Autoriser-Origine" n'est présent sur le ressource demandée. L'origine 'ANGULAR' n'est donc pas autorisée.

Essayé avec des origines Web: * à aucune solution

Jamais su pourquoi Keycloak faisait cette redirection qui posait problème

Le problème a disparu comme par magie lorsque je suis passé de la sécurité au service AA de Keycloak + Autoconfigure à Keycloak + Spring Security selon: https://developers.redhat.com/blog/2017/05/25/easily-secure-your-spring- boot-applications-with-keycloak/

Perdu plusieurs jours de sommeil à cause de cela. Je laisse cela au cas où quelqu'un ferait face à quelque chose de similaire.

0
Galo