角度 2 与 auth0 读取所有用户错误 对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”

Posted 2023-04-13

【中文标题】角度 2 与 auth0 读取所有用户错误 对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”

【英文标题】：angular 2 with auth0 to read all user- error Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'

【发布时间】：2017-05-06 00:18:21

【问题描述】：

能够读取用户配置文件，并可以在我的 Angular 2 应用程序中从 Auth0 更新用户元数据。像这样

 this.lock.getProfile(authResult.idToken, (error, profile) => 
        if (error) 
          // Handle error
          alert(error);
          return;
        

和

this.authHttp
      .patch('https://' + myConfig.domain + '/api/v2/users/' + this.auth.userProfile.user_id, data, headers: headers)
      .map(response => response.json())
      .subscribe(
        response => 
          this.auth.userProfile = response;
          localStorage.setItem('profile', JSON.stringify(response));
          this.router.navigate(['/profile']);
        ,
        error => alert(error.json().message)
      );

但是在试图让所有用户都得到错误时 - "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404."

这是代码

var headers: any = 
      "Content-Type": "application/json; charset=utf-8",
      "cache-control": "no-cache"
    ;
    this.authHttp
          .get('https://' + myConfig.domain + '/api/v2/users/' + '?per_page=100&page=0&search_engine=v2',  headers: headers )
          .map(response => response.json())
          .subscribe(
          response => 
            console.log(response);
          ,
          error => alert(error.json().message)
          );

客户端测试在网站上运行良好的地方 https://auth0.com/docs/api/management/v2#!/Users/get_users 不知道出了什么问题。

还有带有 Access-Control-Allow-Origin 的标题，有同样的问题

var headers: any = 
      "Content-Type": "application/json; charset=utf-8",
      "cache-control": "no-cache",
       "Access-Control-Allow-Origin": "*"
    ;

【问题讨论】：

在您的 Auth0 设置中，您是否将 localhost 添加到了允许的回调 URL？如果没有，那么您也会收到该错误

【参考方案1】：

实际上，您正在尝试使用localhost，因此您必须在后端添加header：

 .header("Access-Control-Allow-Origin", "*")

希望对您有所帮助。

【讨论】：

否 :-( 仍然无法正常工作。使用 Access-Control-Allow-Origin 更新问题标题。同样的问题

您添加了角码（前端）。您可以尝试添加您的后端代码吗？

我正在使用 auth0(auth0.com) 作为服务器。不确定如何设置 Access-Control @auth0 网站

@Manu：您可以在应用程序的设置中配置它，查看：manage.auth0.com/#/applications 我的意思是您希望为您的应用程序允许来源和回调 URL。

我已经配置了允许的回调 URL 和允许的来源 (CORS)。为我的配置编辑了问题。如果我遗漏了什么，请告诉我

【参考方案2】：

您在服务器（例如：Apache）存档：.htaccess 中配置：

Header set Access-Control-Allow-Origin "*"

但是你可以尝试在谷歌浏览器中安装扩展也可以在开发环境的情况下：

输入网址：chrome://settings/ -> Extensions -> Get more extensions -> 搜索Allow-Control-Allow-Origin: * -> Click to Active the Extension and try run code again。

你可以看到为什么这个错误 -> click.

解决了几个人出现相同错误的其他帖子 -> (***)

【讨论】：

嗨小百合，这个扩展已经添加到我的 chrome 中了。但是有同样的问题

现在点击开启跨域资源共享并尝试运行代码

如果不起作用，请尝试在“拦截的 URL 或 URL 模式”中添加 url

【参考方案3】：

问题是即使不会发出 CORS 飞行前请求，请求也会失败。表明这一点的关键部分是对预检请求的响应不在2XX 范围内。

您在预检时收到 404 响应，但如果您从未绑定到 CORS 的应用程序发出相同请求，您仍会收到 404。

您尝试调用的端点的正确地址是：

https://[AUTH0_ACCOUNT]/api/v2/users

而不是那个，你打电话给：

https://[AUTH0_ACCOUNT]/api/v2/users/

您需要删除末尾多余的斜线。

---

但是，这将解决 404 问题，但不会解决根本问题... Auth0 管理 API 旨在供服务器端应用程序使用，该应用程序可以通过客户端身份验证获取必要的访问令牌。

有关参考，请参阅The Auth0 Management APIv2 Token。

_{PATCH用户端点起作用的原因可能是该端点只影响单个用户，并且允许使用CORS。}

【讨论】：

嗨 Joao，我现在使用这个网址，但同样的问题 this.authHttp .get('https://.auth0.com/api/v2/users?per_page=100&page =0&search_engine=v2', headers: headers )

刚刚尝试使用我自己的帐户，如果我使用该 URL 模式，我会得到 401，而不是 404。401 是因为我没有包含必要的令牌，如果我使用 @ 包含有效令牌987654328@ 标头，然后我收到用户数据的 200 响应。 **如果您仍然看到带有该 URL 模式的 404，请确保您正确输入了 URL 的 <my account> 部分。

不确定您如何使用 - 授权：承载 ，但即使我使用 .get('https://<ac name>.auth0.com/api/v2/users'， headers: headers ) 出现错误** 对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'localhost:3000' 不允许访问。** 但补丁正在运行 this.authHttp .patch('https://' + myConfig.domain + '/api/v2/users/' + this.auth.userProfile.user_id, data, headers: headers)

我的错，我查看了具体的错误，但我的大脑并没有处理你试图做什么的全貌。 Auth0 管理 API 旨在供后端服务器使用，因此不启用 CORS，因为应该调用它的应用程序不受这些限制。现在，我找不到任何关于此的文档，但它适用于 PATH 的原因可能是因为这是一个特定于单个用户的端点，因此允许使用 CORS，但不确定这是否会继续这样。我会更新答案。

所以，从客户端（angular2）不能做api调用，它只需要在服务器端实现。没问题等待你的回答。