Using OAuth with Angular2+ accessing API directly - CORS error

sawyers
Community Novice

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=h... 

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

Labels (1)
Users who also had this question