为Angular2的认证启用Auth0跨域资源共享

Question

我试图通过Auth0创建用户身份验证。我遵循了他们网站上的指南，但我发现身份验证失败，并记录到控制台的消息说跨域资源共享未启用。

My auth.service.ts class:

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

我相信我需要在标题中添加一些东西，可能是:Access-Control-Allow-Origin: *.auth0.com*，但是我需要在哪里添加这个，应该以什么格式输入?

完整的错误信息如下:

Cross-Origin Request Blocked:同源策略禁止读取https://[mydomain]/usernamepassword/login的远程资源。(原因:CORS头'Access-Control-Allow-Origin'丢失)。HTTP状态码:400.

我目前正在使用'lite' Angular2开发服务器库/进程。

域名已使用Auth0仪表板以以下格式添加到回调白名单和CORS白名单中:

http://*.[mydomain]*

我会尝试将https://*.[mydomain]*添加到列表中，并设置自动重定向到https://，看看这是否有帮助，但网站似乎不喜欢通过https访问，当我尝试这样做时抛出以下错误:

安全连接失败

加载网页时，连接www.[mydomain]:3004被中断。

也许是因为我没有SSL证书?

Answer 1

你得到的错误是从一个Auth0 API (https://[mydomain]/usernamepassword/login)所以问题不是你的服务器不是返回适当的CORS头，这是Auth0服务器，由于安全将不允许CORS请求，除非你配置起源的白名单。

这意味着，如果你想从浏览器中与Auth0 API交互，你需要配置它，使它能够识别你的客户端应用程序的来源，并添加必要的CORS头使其工作。

您可以通过在您的Auth0仪表板的客户端应用程序设置中提供的Allowed Origins (CORS)设置中添加正确的起源来实现这一点。

Answer 2

对于任何可能仍然有此问题的人，但按照Joao的建议将您的URL添加到客户端设置中的CORS设置中…确保您的配置使用了正确的Client ID。如果你从快速开始复制代码，它默认为"Default App"客户端ID，所以你需要将其更改为正确的客户端ID，以便你的CORS设置生效