Cross-Origin Request Blocked: (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

[ScottH793]

I am attempting to add contacts using the new v3 api built in python and then passed to react through graphql

constant_contact_auth_url = https://authz.constantcontact.com/oauth2/default/v1/authorize?client_id={client_id}&redirect_uri=redirect_uri}&response_type={response_type}&code_challenge={code_challenge}&code_challenge_method=S256&state={state}&scope=account_read+account_update+contact_data+campaign_data"

 in react using

fetch(data.customers.constantContactAuthUrl)

but whenever I hit that url, I am given the error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <url above>" ... and upon writing this, I noticed that the url had "v1" in it, though I had copied it from the documentation here so, I went and tried it with "v3" in the url instead and also other url I found in other documentation with, "https://api.cc.email/v3/" in place of, "https://authz.constantcontact.com/oauth2/default/v1/"  ...it just doesn't do anything, I get no response. I know I am supposed to get a prompt for the user to Allow/Deny access though I can't even get to that prompt because apparently I am being blocked

[Courtney_E]

Hello ScottH793,

Thank you for reaching out to Constant Contact API Developer Support. 

While our expertise is with our API itself as opposed to its implementation within any particular programming language, we are happy to answer any questions pertaining to Constant Contact’s API endpoints, functionality, and documentation.

You can bypass cross-domain request issues by using the Authorization Code Flow instead and making your calls directly from the server, which securely stores your client secret.

OAuth2 Authorization Code Flow

https://v3.developer.constantcontact.com/api_guide/server_flow.html#step-1-create-an-authorization-r...

However, if you do want to continue using the PKCE flow from the client-side, please note that when making requests to the /authorize endpoint, the browser (user agent) should be redirected to the endpoint. You can't use AJAX with this endpoint.

Additionally, here are some 3rd party* resources I found that may provide some additional insight:

[3rd party* reference:] Cross-Origin Resource Sharing (CORS)

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[3rd party* forum post:] “CORS error when posting to /oauth2/token”

https://fusionauth.io/community/forum/topic/835/cors-error-when-posting-to-oauth2-token

[3rd party* forum post:] “Authorization Code Grant blocked by CORS policy”

https://developer.genesys.cloud/forum/t/authorization-code-grant-blocked-by-cors-policy/7874/2

(*We can't specifically recommend or express preference in regards to third party integrations, plugins, services, or resources, as they are not built or supported by Constant Contact, so all/any 3rd party resources referenced within this communication are meant to be used expressly for the purpose of providing examples to better illustrate proposed solutions.)

Please have a look and let us know if you have any other questions!