CORS headers on the oauth2 fitbit authorization endpoint

[crocodilebutter]

I am having some trouble with the oauth2 Authorization Code Grant Flow in regards to CORS and wondering if anyone can see where I am going wrong.

My application setup:

A nodejs backend using the passport-oauth2 and passport-fitbit-oauth2 modules.  Executing a GET request on my server's /auth/fitbit endpoint will initiate the oauth2 flow.

So for testing this I visit http://<myserver>/auth/fitbit in my browser's URL bar.  My nodejs server correctly responds with

HTTP 302

Location:https://www.fitbit.com/oauth2/authorize?response_type=code&redirect_uri=<myredirecturi>&scope=activity%20profile&client_id=<myclientid>

And my browser correctly allows the redirect to the fitbit authorization page.  The entire flow works correctly from then on.

The issue arrises when I attempt to visit http://<myserver>/auth/fitbit not from my browser's URL bar, but from javascript running in the browser.  So the flow there is:

Client side javascript issues ajax request for http://<myserver>/auth/fitbit.

My nodejs server correctly responds with

HTTP 302

Location:https://www.fitbit.com/oauth2/authorize?response_type=code&redirect_uri=<myredirecturi>&scope=activity%20profile&client_id=<myclientid>

 The browser then executes a GET request for that URL.  The GET request includes an Origin header value of <myserver>.

Fitbit responds with

HTTP 302

location:https://www.fitbit.com/login?redirect=%2Foauth2%2Fauthorize%3Fclient_id%<snip>

 But no access-control-allow-origin header is included in the response.

My browser then throws a CORS error:

XMLHttpRequest cannot load https://www.fitbit.com/oauth2/authorize?response_type=code&redirect_uri=<myredirecturi>&scope=activi...>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin <myserver> is therefore not allowed access.

So my questions:

Does anyone else have a setup similiar to me and have this working?

Is it expected that the https://www.fitbit.com/oauth2/authorize endpoint does not respond with an access-control-allow-origin header?  (the api.fitbit.com endpoints do respond with the access-control-allow-origin header).

If it is correct that https://www.fitbit.com/oauth2/authorize is not adding the access-control-allow-origin header, then how can the XMLHttpRequest CORS error be avoided?

I am new to web development.  Any help is much appreciated.  Thank you!

[paicolman]

Hi, did you solve this issue? I'm having a similar problem and am pretty lost...

[JeremiahFitbit · Accepted solution]

Why are you doing a XMLHttpRequest of the OAuth 2.0 Authorization Page?

CORS does not apply to the OAuth 2.0 Authorization Page because it should only ever be loaded directly by the Web browser.

[paicolman]

Yes, I realized this also... finally (I'm a bit slow). So my other post is also solved, i.e. not needed to go that way...

Thanks!!

[someone_new]

I'm running into the same issue as @crocodilebutter with a similar setup. 

---

@JeremiahFitbit wrote:

Why are you doing a XMLHttpRequest of the OAuth 2.0 Authorization Page?

CORS does not apply to the OAuth 2.0 Authorization Page because it should only ever be loaded directly by the Web browser.

---

Can you please explain why that is? In my case, the OAuth handshake happens between the server and Fitbit. Then the client follows the redirect from the server to the the Fitbit authorize page (e.g. 

https://www.fitbit.com/oauth2/authorize?response_type=code&redirect_uri=<myredirecturi>&scope=activity%20profile&client_id=<myclientid>

). But the browser blocks it by CORS policy. Is there a different approach?