0

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." enter image description here

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 enter image description here 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": "*"
    };

enter image description here enter image description here

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
Manu
  • 1,243
  • 5
  • 17
  • 43
  • in your Auth0 settings did you add localhost to your Allowed Callback URLs? if not then you will get that error as well – Bean0341 Dec 20 '16 at 18:30

3 Answers3

0

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

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

Hope this help.

Avnesh Shakya
  • 3,828
  • 2
  • 23
  • 31
  • no :-( still not working.update the question header with Access-Control-Allow-Origin.Same issue – Manu Dec 20 '16 at 17:44
  • You added in angular code(**front-end**). Can you try to add in your **back-end** code? – Avnesh Shakya Dec 20 '16 at 17:49
  • I am using auth0(https://auth0.com) for server.Not sure how to setup Access-Control @auth0 website – Manu Dec 20 '16 at 17:52
  • @Manu: you can configure it in your application's settings, check out: https://manage.auth0.com/#/applications I mean what you want to allow origins and callback URLs for your application. – Avnesh Shakya Dec 20 '16 at 18:08
  • I have configured both Allowed Callback URLs and Allowed Origins (CORS). Edited the question for my configuration.Please let me know, If I am missing anything – Manu Dec 21 '16 at 02:25
  • Still you are getting same? Have you added `localhost` to your Allowed Callback URLs? – Avnesh Shakya Dec 21 '16 at 02:28
  • Hi Avnesh this is the configuration http://localhost:4200, http://localhost:4200/profile, http://localhost:3000, http://localhost:3000/ping, http://localhost:3000/alluser – Manu Dec 21 '16 at 02:30
0

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)

Community
  • 1
  • 1
Sayuri Mizuguchi
  • 5,250
  • 3
  • 26
  • 53
0

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.

João Angelo
  • 56,552
  • 12
  • 145
  • 147
  • Hi Joao, I am using this url now,but same issue this.authHttp .get('https://.auth0.com/api/v2/users?per_page=100&page=0&search_engine=v2', { headers: headers }) – Manu Dec 21 '16 at 15:42
  • Just tried with my own account and I get a 401 if I use that URL pattern, not a 404. The 401 is because I did not include the necessary token, if I include a valid token using `Authorization: Bearer ` header then I get a 200 response with the user data. **If you still see a 404 with that URL pattern then make sure you correctly input the `` part of the URL. – João Angelo Dec 21 '16 at 16:00
  • not sure how yo use - Authorization: Bearer , but even if I am using `.get('https://.auth0.com/api/v2/users'`, { headers: headers }) 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.** but patch is working `this.authHttp .patch('https://' + myConfig.domain + '/api/v2/users/' + this.auth.userProfile.user_id, data, {headers: headers})` – Manu Dec 21 '16 at 16:13
  • My bad, I looked at the specific error and my brain did not process the full picture of what you were trying to do. The Auth0 Management API is meant to be used by back-end servers so CORS is not enabled as the applications that should be calling into it are not subject to those restrictions. Right now, I can't find any documentation on this but the reason it works for the PATH is possibly because that's an endpoint specific to a single user and as such CORS is allowed, but not sure if this will continue like this. I'll update the answer. – João Angelo Dec 21 '16 at 16:41
  • So, from client side(angular2) can't do the api call, it need to implement on server side only.No problem waiting for your answer. – Manu Dec 21 '16 at 16:52
  • Yes, that's correct, client-side within the browser you have the CORS issue, but even if you didn't, the client would not be able to request a proper access token because any type of client credentials stored by the client could be obtained by an attacker that has access to the client-side code. **The correct approach is to do it server-side**. – João Angelo Dec 21 '16 at 17:00
  • I think from client side we can do it, by `authHttp` of `angular2-jwt`I tried but ending with error - **403 (Forbidden)** – Manu Dec 21 '16 at 17:38
  • The point isn't if you can find a way to do it client-side; you should not be doing it client-side within your own application because of security; you don't want your users to be able to access the Management API. – João Angelo Dec 22 '16 at 09:49