CORS error loading SVG from Sanity CDN inline with external-svg-loader

The CORS issue you're experiencing is actually expected behavior when trying to fetch SVGs from Sanity's CDN for inline manipulation. The good news is there's a straightforward solution!

The Solution: Add Your Origin to CORS Settings

You need to add your localhost (and later your production domain) to Sanity's CORS allowed origins. You can do this in two ways:

Option 1: Via CLI (Recommended)

sanity cors add http://localhost:3000

Option 2: Via Sanity Manage Dashboard Go to manage.sanity.io, select your project, and add http://localhost:3000 to the CORS origins list. Note that credentials are not needed for these origins when loading assets.

Once you've added your origin, external-svg-loader should work perfectly! The Sanity Asset CDN does support CORS for cross-domain asset access - you just need to explicitly allow your domain.

Why This Happens:

The Sanity CDN (cdn.sanity.io) requires origins to be explicitly whitelisted for security reasons. By default, it blocks cross-origin fetch requests unless your domain is in the allowed list. This is standard security practice for CDNs.

Important: Remember to add your production domain(s) to the CORS origins before deploying! For example:

sanity cors add https://yourdomain.com

Alternative Approaches (If You Need Them):

If for some reason you can't modify CORS settings or need more control, you could:

1. Fetch via Next.js API Route - Create a proxy endpoint that fetches the SVG server-side (where CORS doesn't apply) and serves it to your frontend
2. Use Sanity's Image URL Builder - Fetch the SVG programmatically and insert it inline yourself using standard fetch

But honestly, just adding your origin to CORS is the simplest solution and exactly what this use case calls for. Your editors can continue uploading SVGs normally through Sanity Studio, and you can manipulate them with CSS as intended! 🎉