Question

我试图通过Auth0创建用户身份验证。我已经按照他们网站上的指南进行了操作，但我发现身份验证失败并在控制台上记录了一条消息，说明未启用跨域资源共享。

我的auth.service.ts课程：

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*，但是我需要在哪里添加它以及应该以什么格式输入？

完整的错误消息如下：

阻止跨源请求：同源策略禁止在https://[mydomain]/usernamepassword/login读取远程资源。（原因：CORS标题＆＃39; Access-Control-Allow-Origin＆＃39;缺失）。 HTTP状态代码：400。

我目前正在使用＆＃39; lite＆＃39; Angular2开发服务器库/进程。

使用Auth0仪表板将域名添加到回调和CORS白名单中，格式如下：

http://*.[mydomain]*

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

安全连接失败

在加载页面时，与[。[mydomain]：3004的连接被中断。

也许是因为我还没有获得SSL证书？

Answer 1

您获得的错误来自Auth0 API（https://[mydomain]/usernamepassword/login），因此问题不是您的服务器不返回相应的CORS标头，而是由于安全性而导致的Auth0服务器除非您配置了原始白名单，否则不会允许CORS请求。

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

您可以通过将正确的来源添加到Auth0信息中心的client application settings中提供的允许的来源（CORS）设置来实现此目的。

Answer 2

对于可能仍然遇到此问题的任何人，但是在Joao建议的客户端设置中将您的URL添加到CORS设置中......请确保您的配置使用正确的客户端ID。如果您从快速入门复制代码，它默认为“默认应用程序”客户端ID，因此您需要将其更改为正确的客户端ID，以便CORS设置保留

使用Auth0为Angular2身份验证启用跨源资源共享

2 个答案: