CORS issue while making an Ajax request for oauth2 access token

Question

I am making an ajax call from my client to the google oauth 2 API 'https://accounts.google.com/o/oauth2/auth?redirect_uri=http://blah.com&response_type=token&client_id....' to get the access token, but i get following 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://blah-blah.com' is therefore not allowed access

I want the call to be ajax so that the user is not disturbed when the call is made through url or window.location.href or in other words, how can i get the access token such that the whole page does not load, and is it possible to resolve the above error???

Answer 1

OAuth2 auth endpoint doesn't support AJAX by design. It's an entry point to the authentication system, so you must get there by redirect. The result of the authentication is again a redirect to the URL you provide, so AJAX doesn't make much sense there.

• Moody: Thanks for the explanation @Ján Halasa. I'm just wondering: if my front-end is a SPA (e.g., Angular). How can I send back a JWT token after he has authenticated using Google, since it is now a redirect rather than a plain get request call where a client can obtain data directly back.
• LuisMendes535: @Moody have you solved this question regarding sending back the JWT on a SPA?
• Ján Halaša: @LuisMendes535 With OAuth2 questions it's good specify a full context - what flow/grant you want to use (code, implicit, hybrid) and what token (access, ID, refresh) you want to use for what purpose. JWT is just a format. I would suggest you to take a look at the OAuth 2.0 for Browser-Based Apps document, which will probably answer your questions.
• Moody: @LuisMendes535 Yes - Check this out: stackoverflow.com/questions/49887018/…
• iMe: I've been struggling SO hard with this, this lead me in the right direction🙏. Thanks!