Access to fetch blocked by CORS policy and Invalid callback url

[Jake_Koenig]

I've been trying to follow the example code here: https://github.com/Fitbit/sdk-oauth and I'm running into two problems:

1. When I click "authorize" in settings in the app I get the following error logged:

[11:20:18 AM] Settings: Access to fetch at
'https://api.fitbit.com/oauth2/token' from origin
'https://app-settings.fitbitdevelopercontent.com' 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. (settings.js:1,1)
[11:20:18 AM] Settings: Uncaught (in promise) TypeError: Failed to fetch
(settings.js:3,1)

2. I backed up and tried to follow the Oauth 2.0 tutorial page and got the following authorization url: https://www.fitbit.com/oauth2/authorize?response_type=code&client_id=23BGS2&redirect_uri=https%3A%2F...

after clicking it and selecting authorize I got a page that just said "Invalid callback url".

Am I doing something wrong? I might just not understand what I'm doing that well.

[JohnFitbit]

Hi @Jake_Koenig,

The CORS Policy Flag that you're encountering is likely due to your domain and callback url containing "Fitbit". If you remove "Fitbit" from your URLs, you should no longer encounter these errors.

Let me know if you continue to encounter this error.

[Jake_Koenig]

Thanks for your response JohnFitbit. I'm afraid I don't really understand. Are you saying my callback url should be 'https://app-settings.developercontent.com/simple-redirect.html' instead of 'https://app-settings.fitbitdevelopercontent.com/simple-redirect.html'? That doesn't seem right.

[JohnFitbit]

@Jake_Koenig We don't allow CORS to non-Fitbit domains in general. Your callback URL may be getting flagged because it has "fitbit" in it.

[Jake_Koenig]

So is this example hosted on github incorrect: https://github.com/Fitbit/sdk-oauth

It says to configure the application with:

• Callback URL: https://app-settings.fitbitdevelopercontent.com/simple-redirect.html

Is that not what I should be doing? If it's not what I should be doing what should I be doing?

[manufacturedba]

hey @Jake_Koenig, responding since I went through the tutorial recently.

2. Your URL works perfectly. The "Invalid callback url" is your own site's code from simple-redirect.js

1. Save yourself a million headaches by making your requests to Fitbit only through your own server. CORs is a security mechanism for browsers and its way more work to bust. You also don't want to be passing these tokens around in plain view like "clientSecret".

[MuskanMohammad]

Hi @manufacturedba

:4200/my-health?code=<code>&state=<state>:1 Access to XMLHttpRequest at 'https://api.fitbit.com/1/user/-/profile.json' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field ch_app_access_token is not allowed by Access-Control-Allow-Headers in preflight response.

can you plz help me out in this