Keycloak 각도 'Access-Control-Allow-Origin' 헤더가 없습니다.

Keycloak 각도 'Access-Control-Allow-Origin' 헤더가 없습니다.

나는 각진 앱에 키 잠금을 통합했다.기본적으로 프런트엔드와 백엔드는 모두 다른 서버상에 있습니다.Apache 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

웹 콘솔에서 오류가 발생했습니다.

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

약 2주간 KeyCloak 및 CORS와 싸우고 있었습니다.이것이 저의 솔루션(KeyCloak 3.2.1용)입니다.

KeyCloak 서버를 설정하는 것이 중요합니다.당신의 왕국의 WebOrigin이 필요한 것 같습니다.

*

Only one origin "*".

내게 필요한 건 그게 다야

서버를 WebOrigin으로 입력하면 문제가 시작됩니다.열쇠고리를 부를 때.JavaScript 에서는 keycloak 에서는 CORS 헤더가 생성되지 않기 때문에 수동으로 설정해야 합니다.또한 init 성공 후 keycloak.getUserInfo를 호출합니다.이것은 2개의 CORS 헤더를 얻을 수 없습니다.

keyclock 메일링 리스트의 깊은 부분에는, keyclock.json에 enable-timeout=true 를 설정할 필요가 있다고 기재되어 있습니다만, keycloak.gitbooks.io 에는 아무것도 기재되어 있지 않습니다.그래서 사실이 아닌 것 같다.

또한 JavaScript와 Node를 설명할 때 CORS를 언급하지 않습니다.Js 어댑터는 왜 그런지 모르겠지만 전혀 중요하지 않은 것 같습니다.

또한 CORS 헤더를 제공하기 위해 WildFly 설정을 터치해서는 안 됩니다.

또한 OIDC의 CORS는 특수한 KeyCloak 기능(버그가 아님)입니다.

이 답변이 당신에게 도움이 되길 바랍니다.

URL(영역이의 Web Origins URL)을를 들어, Web Origins URL( Origins URL)은 다음과 같습니다.http://localhost:3000/로로 합니다.http://localhost:3000(「」가 없는 해 주세요/ URL 을 사용하여 에 열 수 .*

웹 소스를 "*"로 설정하면 보안에 구멍이 뚫릴 수 있습니다.임의의 도메인의 스크립트가 사용자 브라우저 내에서 사용자를 대신하여 요청을 할 수 있습니다.

이와 같은 방법으로 보안 기능을 비활성화할 경우 보안 기능이 존재하는 이유를 고려해야 합니다.

Keycloak 문서의 8.1.1의 "Web Origins"를 참조하십시오.

같은 문제가 있었습니다만, (적어도) Keycloak Server 버전 8.0.1 에서는, 「Web Origins」필드의 입력으로서 「+」를 추가할 수 있습니다.이것은 최선의 선택이라고 생각됩니다.

'+' 효과는 '웹 오리진' 항목으로 'http://localhost:4200'을 추가하는 것과 같아야 합니다(아래 스크린샷 참조).

다음은 'Web Origins' 필드 도구 설명입니다.

CORS 출신은 인정된다. 「유효한 리다이렉트 URI」의 모든 발신원을 허가하려면 , 「+」 모든 원본을 허용하려면 "*"를 추가합니다(아래 스크린샷 참조).

저도 같은 CORS 오류가 있었습니다.KeyCloak 신기능web-origin을 '*', '+' 및 특정 URL로 설정해 보았다.아무것도 안 먹혔어.클라이언트 설정에서 '접근 유형'을 '공개'로 변경하기 전까지.그 후 web-origin을 특정 URL로 설정하는 옵션과 +가 모두 작동했습니다.*로 설정하는 것은 안전하지 않기 때문에 시도하지 않았습니다.

액세스 타입을 기밀로 설정하면, 다시 CORS 에러가 발생하기 시작합니다.PKCE(코드 플로우)를 사용한 인가 플로우를 시도하고 있었습니다.

버전 10.0.2 사용.

작동한 설정의 스크린샷:

다소 오래된 질문이지만 어쨌든 대답하고 있습니다.에서 Keyclock admin으로 이동합니다.clients->your client에는 '아까부터'라는 web origins【URL】【URL 。

고객님의 질문에 대한 답변으로 WebOrigin을 클라이언트레벨(레름레벨이 아님!)에서 *로 추가했습니다만, 제 경우는 효과가 없었습니다.사실, KC가 CORS 헤더를 두 번 보냈기 때문에 *를 삭제하는 것이 제 요령이었습니다.- 제거, 제거는 한 번으로...

당신의 답변 덕분에, 저는 운 좋게도 제 문제에 대한 답을 찾았습니다.

우리 모두가 동의하는 것은 KC 문서가 최소한 매우 빈약하다는 것이다.

바보들을 위해 쓰여졌지만...우린 바보도 아니고, 주제도...

기술적인 세부 사항은 설명되지 않습니다.예를 들어 엔드포인트로부터의 응답은 무엇입니까?웹 검색(2주)은 조금 도움이 됩니다만, 설명서에 기재되어 있지 않은 이유는 무엇입니까?

예를 들면요.하지만 난 몇 가지...

서류 작성 도와 드릴까요?

같은 문제가 있었습니다만, 제 경우는, keycloak js 어댑터를 작성할 때 옵션오브젝트를 사용했기 때문에, 인증 서버의 URL이 https가 아닌 http로 잘못 설정되어 있었습니다.

const keycloak = Keycloak({
    url: 'http://my-keycloak-auth-server/auth',
    realm: 'myRealm',
    clientId: 'myClient'
});

하지만 정답은

const keycloak = Keycloak({
    url: 'https://my-keycloak-auth-server/auth',
    realm: 'myRealm',
    clientId: 'myClient'
});

Angular 6, Spring Boot for REST Web Services 및 Keycloak에서 동일한 문제에 직면.

Keycloak 주소: KEYCLOAK
Angular 6 앱 주소: Angular_APP
2개의 REST WS를 Keyclock 및 스프링 자동 구성으로 보호: AA, BB

흐름: Angular App request(GET) AA, AA request(GET) BB

XMLHttpRequest 오류 사용은 다음과 같습니다.AA를 로드할 수 없습니다.비행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 못했습니다.요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'ANGULAR_APP'은 액세스가 허용되지 않습니다.

Angular에서 관측 가능 사용: AA 로드 실패: 'BB'에서 'KEYClOAK'로 방향 수정이 CORS 정책에 의해 차단되었습니다.요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'ANGUAL'은 액세스가 허용되지 않습니다.

웹 출처로 시도: *에서 솔루션 없음

Keycloak이 문제의 원인이 되는 리다이렉트를 하는 이유를 알지 못했습니다.

https://developers.redhat.com/blog/2017/05/25/easily-secure-your-spring-boot-applications-with-keycloak/에 따라 서비스 AA의 보안을 Keycloak + Autoconfigure에서 Keycloak + Spring Security로 전환했을 때 문제가 마법처럼 사라졌습니다.

이것 때문에 며칠 동안 잠을 못 잤어.누군가 비슷한 상황에 처했을 때를 대비해서 이걸 두고 가는 거야

초기화 시 이 행을 추가합니다.

this.keyclockAuth.init({ onLoad: 'login-required', 흐름: 'implicit'})

와 같은 에러와 싸웠다.keycloak-jsAngular에는 없지만:문서의 코드로 정상적으로 로그인할 수 있었습니다.

keycloak.init({
  onLoad: 'login-required',
}).then(function(authenticated) {
  alert(authenticated ? 'authenticated' : 'not authenticated');
}).catch(function() {
  alert('failed to initialize');
});

단, 연속된 콜(keycloak.loadUserProfile()저 같은 경우에는,accountendpoint)에서 CORS 오류가 발생합니다.

제가 코드를 잘못 조작했다는 것을 나중에 알게 되었습니다. 그래서 연속된 통화는 다음 레이스 조건을 가지고 있었습니다.init돌이켜보면 분명하지만..

TLDR: Keyclock 엔드포인트를 호출한 후init콜이 종료되면 응답에 CORS 헤더가 없어지고 CORS 오류가 발생합니다.인증되지 않았다는 의미일 뿐입니다.

Keyclock 12에서 Keyclock 15로 업그레이드한 후에도 비슷한 문제가 발생하였습니다.keycloak.js 파일도 업그레이드한 후 다음 위치에 있습니다.https://your-keycloak-server/auth/js/keycloak.js내 웹 어플리케이션에서 다시 작동하기 시작했어.

언급URL : https://stackoverflow.com/questions/45051923/keycloak-angular-no-access-control-allow-origin-header-is-present