Using OAuth with Angular2+ accessing API directly - CORS error

[sawyers]

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

[s_]

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.

[sawyers]

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

[pklove]

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.

[themidiman]

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

CORS Anywhere 

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

[RaulAlvarez]

I have this same issue, I notice that there are some CORS issues and only solutions I've found are the use of a proxy or side-server. I'd love to see if someone finds a solution.

Issue:

"Access to fetch at 'https://[production url]/login/oauth2/auth' from origin '[web app]' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."