Angular2 인증을 위해 Auth0과 교차 출하 자원 공유 활성화

Question

Auth0을 통해 사용자 인증을 생성하려고합니다. 나는 그들의 웹 사이트에서 작성된 안내서를 따라 갔지만 콘솔에 기록 된 메시지로 인증이 실패하여 크로스 - 원본 자원 공유가 활성화되어 있지 않음을 발견했습니다..

내 auth.service.ts 클래스 : Access-Control-Allow-Origin: *.auth0.com*하지만 어디 그것이 입력해야이 어떤 형식을 추가해야합니다 : 나는 아마도 헤더에 무언가를 추가 할 필요가 생각

export class AuthService { 
    // Configure Auth0 
    auth0 = new Auth0({ 
    domain: myConfig.domain, 
    clientID: myConfig.clientID, 
    callbackOnLocationHash: true, 
    callbackURL: myConfig.callbackURL, 
    }); 

    constructor(private router: Router) { 
    var result = this.auth0.parseHash(window.location.hash); 

    if (result && result.idToken) { 
     localStorage.setItem('id_token', result.idToken); 
     this.router.navigate(['/dashboard']); 
    } else if (result && result.error) { 
     alert('error: ' + result.error); 
    } 
    } 

    public login(username: string, password: string) { 
    this.auth0.login({ 
     connection: 'Username-Password-Authentication', 
     responseType: 'token', 
     email: username, 
     password: password, 
    }, function(err: any) { if (err) alert("something went wrong: " + err.message); }); 
    }; 
} 

? 차단

크로스 원산지 요청 :

전체 오류 메시지

는 다음과 같은 기원 정책 https://[mydomain]/usernamepassword/login에서 원격 자원을 읽어 허용하지 않습니다. (이유 : CORS 헤더 'Access-Control-Allow-Origin'누락). HTTP 상태 코드 : 400.

현재 'lite'Angular2 개발 서버 라이브러리/프로세스를 사용하고 있습니다.

http://*.[mydomain]* 

내가 목록에 https://*.[mydomain]*을 추가하려고하고 https://로 자동 리디렉션을 설정합니다 :

도메인 이름은 콜백 다음과 같은 형식의 Auth0 대시 보드를 사용하여 CORS의 화이트리스트 모두에 추가되었습니다 이 도움이 될 경우 볼 수 있지만, 웹 사이트는 https를 통해 액세스되는 같이하지 않는 것, 내가 그렇게 할 때 다음과 같은 오류가 발생합니다 :

가 보안 연결이

01 실패

페이지로드 중 www. [mydomain] : 3004에 대한 연결이 중단되었습니다.

아마도 SSL 인증서가 없기 때문에 ?? 당신이지고있어 오류가 Auth0의 API (https://[mydomain]/usernamepassword/login) 그래서 문제에서입니다

Answer 1

해당 CORS 헤더를 반환 서버 하지 아니라, 때문에 CORS를 허용하지 않습니다 보안로하지 않는 를 요청 Auth0 서버입니다 기원의 화이트리스트을 구성하십시오.

브라우저에서 Auth0 API를 사용하려면 클라이언트 응용 프로그램 원본을 인식하고 작동시키기 위해 필요한 CORS 헤더를 추가하는 방식으로 구성해야합니다.

Auth0 대시 보드의 client application settings에있는 Allowed Origin (CORS) 설정에 올바른 원산지를 추가하여이 작업을 수행 할 수 있습니다.

Answer 2

Joao가 제안한대로 클라이언트 설정의 CORS 설정에 URL을 추가 했는데도 문제가 계속되는 경우 ... 올바른 클라이언트 ID를 사용하고 있는지 확인하십시오. 빠른 시작에서 코드를 복사하면 기본값 인 "기본 응용 프로그램"클라이언트 ID가 기본값이되므로 CORS 설정이 올바른 클라이언트 ID로 변경되어야합니다.