cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Using OAuth with Angular2+ accessing API directly - CORS error

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)
Tags (2)
4 Replies
Highlighted
Community Member

Try it on a different browser.  Sometimes localhost is given weird permissions compared to a fully qualified domain name.  You can also try running ngrok to get a disposable url for a short period of time and try running it through there.

0 Kudos
Highlighted
Community Member

This is the result when using Firefox (above was Chrome).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://[test url]/login/oauth2/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://[test url]/login/oauth2/token. (Reason: CORS request did not succeed).[Learn More]
I also tried publishing to our test environment which uses are FQDN instead of localhost. Same issue.
Thanks,
Sam
0 Kudos
Highlighted
Surveyor

I'm not sure you can get around this without using a proxy.

This came up in this thread: https://community.canvaslms.com/thread/23960-can-we-bypass-cors-restrictions-to-make-api-calls 

It would be interesting to know if staroutofspace‌ found a solution.

0 Kudos
Highlighted
Learner II

I wonder if the cors anywhere service/concept can help in this situation?:

CORS Anywhere 

https://cors-anywhere.herokuapp.com/