CORS error and upgrading to v3.30 resolved with some TypeScript updates.

5 replies
Last updated: Mar 15, 2024
I keep getting this upsell CORS error..
AI Update

Based on the SEO context mentioning Shopify post-purchase extensions and upsell functionality, it sounds like you're building a Shopify app or extension that needs to fetch data from Sanity, and you're hitting CORS restrictions.

The issue is that Shopify's post-purchase extensions and checkout UI extensions run in a sandboxed environment with strict network access policies. When these extensions try to fetch data from Sanity's API, the browser blocks the request because your domain isn't configured in Sanity's CORS Origins settings.

Here's how to fix it:

Configure CORS Origins in Sanity

  1. Go to manage.sanity.io
  2. Select your project
  3. Navigate to Settings → API → CORS Origins
  4. Add the origin that Shopify is making requests from

For Shopify extensions, you'll typically need to add:

  • https://cdn.shopify.com (for checkout and post-purchase extensions)
  • Your Shopify store domain (e.g., https://yourstore.myshopify.com)

Important: Make sure to check the "Allow credentials" checkbox if you're using authentication tokens with your Sanity client.

Additional Considerations

Asset CDN: If you're fetching assets (images, files) directly from Sanity's CDN, note that CORS settings in the Management Dashboard only apply to the Data API, not the Asset CDN. Most image requests work without additional CORS configuration, but if you're fetching specific file types like GeoJSON, you might encounter separate restrictions.

Shopify Network Access: Shopify's post-purchase and checkout UI extensions have limited network access. They can only make fetch requests to:

  • Shopify's own APIs
  • Your app's backend (app proxy)
  • Approved third-party domains

If you continue having issues after configuring CORS, you might need to proxy requests through your Shopify app backend rather than calling Sanity's API directly from the extension. Alternatively, consider using Sanity Functions as a serverless backend that can handle these requests with proper CORS configuration and act as an intermediary between your Shopify extension and Sanity's Content Lake.

not 100% sure if related but in sanity’s dashboard under project > api, there’s a CORS origins section.
we had to add
<http://localhost:3000>
as a CORS origin at one point
Thats not even my project, its sanity internals
Try upgrading to v3.30?
Wow, that threw me into a rabbit hole of typescript errors, is @sanity/types even needed anymore?
user Y
that did the trick, although I had to update typescript as well.. Thanks

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?