Storefront GraphQL calls blocked in Themes > Customize due to CORS

Online Store and Theme Development
1

I believe the CORS setup may not be correct for the Theme > Customize to allow for Storefront API calls for stores that have a custom domain.

I’ve been receiving reports from merchants that my app is not visible in the Theme > Customize but it works fine on their storefront.

Looking at the console logs in the Theme > Customize, I am seeing CORS errors similar to the following:

Access to fetch at https://example.com/api/2024-01/graphql.json from origin https://example.myshopify.com has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.

Note the different URLs above which I believe may be the issue. I was able to reproduce this consistently in Chrome on stores that have a custom domain. And on dev stores without a custom domain, and on FireFox, I was not able to reproduce this.

Could you please look into this issue?

Thanks,
Tom

2

After re-reading the docs I wonder if Storefront API calls are always supposed to be made using the myshopify.com domain? The calls do work for custom domains outside of the Theme > Customize which is why I’m unsure if the CORS thing is a bug or “as designed”. If someone from Shopify can clarify this that would be great.

Thanks!
Tom

3

I modified my Storefront API calls to use the *.myshopify.com url, which is found in Liquid as shop.permanent_domain. This appears to fix the CORS issue.

1 Like