How to Set CORs Origins for Cloudflare Pages

Good news! Sanity supports wildcard patterns in CORS origins, which is perfect for handling Cloudflare Pages deploy previews with dynamic hash subdomains.

In your CORS origins configuration (found in manage.sanity.io under Settings > API > CORS Origins), you can add a pattern like:

https://*.stylitics-demo-beta.pages.dev

This wildcard pattern will match all deploy preview URLs like https://444238b5.stylitics-demo-beta.pages.dev, https://abc123ef.stylitics-demo-beta.pages.dev, etc.

Important considerations:

1. Credentials and wildcards: If you need to use authentication tokens with your Sanity client (which requires the "Allow credentials" option), be aware that browsers have security restrictions around wildcards with credentials. The CORS spec doesn't allow Access-Control-Allow-Origin: * when credentials are involved, but subdomain wildcards like *.yourdomain.pages.dev do work with credentials enabled.

2. Add both production and preview patterns: You'll likely want to add multiple origins:

   • https://*.stylitics-demo-beta.pages.dev (for all deploy previews)
   • Your production domain (e.g., https://stylitics-demo-beta.pages.dev)
   • http://localhost:3000 (for local development)

3. Protocol matters: Make sure to include https:// in your pattern - the protocol must match exactly.

4. Asset CDN limitation: Note that CORS settings configured in the Management Dashboard apply to the Data API but not automatically to the Asset CDN. If you're fetching assets directly from the browser, you may need additional configuration.

To add these, just go to your project in the Sanity Management Dashboard, navigate to Settings > API > CORS Origins, and add the wildcard pattern. Enable "Allow credentials" if you're using authentication tokens in your Sanity client.