shopify - /admin/oauth/authorize is blocking CORS

[paullam328]

Access to XMLHttpRequest at 'https://test-store.myshopify.com/admin/oauth/authorize?client_id=12345&redirect_uri=https://aws-api....' (redirected from 'https://aws-api.amazonaws.com/Prod/shopify/init') from origin 'https://test-store.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My flow is essentially - Shopify theme extension page calls API from aws, which then redirects to shopify's /admin/oauth/authorize. /admin/oauth/authorize calls my aws API, then stores the token and redirects back to the Shopify theme extension page.

If I am correct, it seems like https://test-store.myshopify.com/admin/oauth/authorize is blocking CORS from https://aws-api.amazonaws.com/Prod/shopify/init ? I don't think https://aws-api.amazonaws.com/Prod/shopify/init is the one that's blocking?

I added:

https://aws-api.amazonaws.com/Prod/shopify/oauth/callback
https://aws-api.amazonaws.com/Prod/shopify/init
https://test-store.myshopify.com/admin/oauth/authorize

To Configurations --> Allowed redirection URL(s) in ShopifyPartners, and it's still not working.

May I know what am I doing wrong here, help would be appreciated.

[paullam328 · Accepted solution]

I *think* I figured it out? 

As of the docs (https://shopify.dev/docs/apps/build/authentication-authorization/access-tokens/authorization-code-gr...). It says: 

"

Anchor link to section titled "Redirect using a 3xx redirect"

If your app doesn't need to escape the iframe because it isn't embedded, or the embedded parameter's value isn't 1, then you can redirect to the grant screen using a 3xx redirect.

The grant screen uses a URL with a specific format. When the user arrives at the URL, Shopify shows the grant screen to receive authorization from the user.

If you're using a Shopify Admin API library, then you can use a method from the library to construct the redirect URL and set a signed cookie. Later, your app will check the cookie to verify that the same browser initiated the OAuth request.

"

So instead of using backend to redirect, I just pretty much do 

window.location.href = "oauth_redirect_url"

instead...

I guess shopify auth flow doesn't allow external apis to use oauth flow? And I think I overcomplicated the flow a little...

I am marking this as a solution, but still:

There's nowhere in the doc saying that external APIs would be blocked from using OAuth flow, so more explanation is needed here.