AnsweredAssumed Answered

Using OAuth with Angular2+ accessing API directly - CORS error

Question asked by Sam Sawyer on Nov 16, 2018
Latest reply on Nov 26, 2018 by Jeffrey Anderson

We are trying to access the Canvas API directly through an Angular application.

 

First we have a url to click for testing the Canvas authorization screen.

https://[test install url]/login/oauth2/auth?client_id=[client id]&response_type=code&redirect_uri=http://localhost/canvas 

 

After clicking authorize on the following Canvas screen we are correctly directed to our /canvas route in angular. We next grab the code sent back to us and now need to get an access token.

 

Here is the code that runs async to get the access token:

 

apiurl = 'https://[test canvas install]/login/oauth2/token';

this.http
.get(this.apiurl)
   .pipe(
      tap((token: string) => {
         console.log("canvas token " + token);
      })
   ).subscribe();

 

Here is the error when the above is run:

 

Failed to load [test install url]/login/oauth2/token: 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' is therefore not allowed access.

 

How do we get around this CORS issue?

 

Thank you,

Sam

Outcomes