angular 2 with auth0 to read all user- error Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'

Question

Able read a user profile and can update user meta data from Auth0 in my angular 2 application.Like this

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

And

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

But while trying to get all user getting error - "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."

This is the code

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

where client test is working fine in the website https://auth0.com/docs/api/management/v2#!/Users/get_users Not sure what going wrong.

Also header with Access-Control-Allow-Origin, have same issue

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

Answer 1

Actually, You are trying with localhost, so you have to add header in back-end:

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

Hope this help.

Answer 2

You config this in the server (Example: Apache) archive: .htaccess with:

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

But you can try install the Extension in Google Chrome too In the case of a development environment:

Type the url: chrome://settings/ -> Extensions -> Get more extensions -> Seach for Allow-Control-Allow-Origin: * -> Click to Active the Extension and try run code again.

And you can see Why this error -> click.

Other posts that solved problems of several people with the same error -> (stackoverflow)

Answer 3

The problem is that the request will fail even if a CORS pre-flight request would not be issued. The key part that indicates this is that the response to the preflight request is not in the 2XX range.

You're getting a 404 response on the preflight, but if you make the same request from an application that is not bound to CORS you would still get a 404.

The correct address for the endpoint you're trying to call is:

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

and instead of that, you're calling:

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

You need to remove the extra slash at the end.

---

However, this will fix the 404 issue, but not the underlying problem... the Auth0 Management API is meant to be used by server-side application that can obtain the necessary access tokens through the means of client authentication.

For reference, see The Auth0 Management APIv2 Token.

_{The reason that the PATCH user endpoint works may be due to the fact that this endpoint only affects a single user and CORS is allowed.}