Marketing Cloud API Request - Access to fetch at '[auth URL]' from origin 'https://localhost:3000' has been blocked by CORS policy

Question

I'm hoping someone can help me with this as I've been struggling with it for a few days now...

Issue:

Access to fetch at '[auth url]' from origin 'https://localhost:3000' has been blocked by CORS policy: 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.

Context:

I'm building an SFMC web app using Node.js + React. I've set up my Web App package in SFMC and I'm making the following fetch() to SFMC to retrieve the Authorization Code needed to eventually retrieve the Access Token

// This is wrapped in an object which is why you see ':'

  getAuthCode: () => {
    fetch(`${authOrigin}/v2/authorize?response_type=code&client_id=${clientId}&redirect_uri=${encodedRedirectUri}`)
      .then(response => window.location.assign(response.url))
  }

After looking into CORS i understand the issue because the response I receive from SFMC does not include an Access-Control-Allow-Origin header. The following are the headers i receive from the response

HTTP/1.1 302 Found
x-mashery-message-id: e03648e5-00d5-433a-b456-2a09a3d2802f
x-mashery-responder: 04-at08
strict-transport-security: max-age=15552000; preload
Content-Security-Policy: upgrade-insecure-requests
x-xss-protection: 1; mode=block
x-frame-options: DENY
x-content-type-options: nosniff
cache-control: no-cache, must-revalidate, max-age=0, no-store, private
Referrer-Policy: strict-origin-when-cross-origin
Content-Length: 0
Location: [auth URL - blocking it for security reasons]
Date: Thu, 25 Feb 2021 14:48:21 GMT
Connection: keep-alive

Obviously, you don't see an Access-Control-Allow-Origin header. However, we don't own SFMC's server so we can't modify it to add that header, so how can we get around this issue? At the moment I'm using this Cors chrome app which forces response to include Access-Control-Allow-Origin: * so I can try and continue developing locally, but when I eventually deploy this to Heroku, what then? My assumption is I'd still face this issue even after hosting this app.

If anyone's built SFMC apps before, can they explain how they get around this issue? Are my requests getting blocked by CORS because I'm developing locally? Would it be fixed once I deploy to Heroku?

Answer 1

I found the answer after talking with support:

If you're familiar with CORS, the reason for it is to prevent cross-domain scripting (to prevent phishing attempts), which menas you can't run a call from your website to SFMC servers without receiving the CORS erros.

Marketing Cloud can't whitelist client domains for CORS requests, so there's no way to add the Access-Control-Allow-Origin header. The resolution that was suggested was to either run the Marketing Cloud calls from a server, proxy the requests using a service like cors-anywhere, or using a JSONP function.