TextureLoader Error: "Access to Image at 'https://mydomain.com>' Has Been Blocked by CORS Policy"

I can see why this error is confusing! The CORS header showing http://localhost:3000 when you're accessing from https://mydomain.com is definitely strange. Let me help you understand what's happening and how to fix it.

Understanding the CORS Configuration

According to the CORS Origins documentation, the CORS settings you configure in Sanity Manage (Settings > API > CORS Origins) control which domains can access your Sanity project's Data API with credentials.

However, there's an important caveat: Based on a community discussion about Asset CDN CORS settings, the CORS configuration in the Management Dashboard applies to the Data API but does not automatically apply to the Asset CDN (cdn.sanity.io). The Asset CDN documentation mentions that the CDN "automatically handles various technical optimizations including CORS (Cross-Origin Resource Sharing) configuration for cross-domain asset access."

Most Likely Cause: Browser Cache

The most probable explanation for seeing http://localhost:3000 in the error when accessing from https://mydomain.com is browser caching of CORS preflight responses. If you previously loaded this image from localhost during development, your browser may have cached that CORS response and is replaying it.

Try these steps first:

1. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
2. Clear browser cache completely
3. Test in incognito/private mode to rule out caching
4. Try a different browser to confirm it's cache-related

Three.js TextureLoader Configuration

For Three.js specifically, ensure you're properly configuring the crossOrigin setting:

const loader = new THREE.TextureLoader();
loader.setCrossOrigin('anonymous');
const texture = loader.load(imageUrl);

Or set it before loading:

const loader = new THREE.TextureLoader();
loader.crossOrigin = 'anonymous';

Debugging Steps

1. Check actual response headers: Open DevTools > Network tab, find the image request, and examine the response headers. Look for whether it says "from disk cache" or "from memory cache" - this confirms browser caching
2. Verify the CDN response: Test the image URL directly in a fresh incognito window to see what headers the CDN actually returns
3. Check for service workers: Run navigator.serviceWorker.getRegistrations() in the console to see if any service workers might be caching responses
4. Look for proxies or middleware: Check if your application has any proxy configuration or middleware that might be interfering with requests

What About CORS Origins Settings?

While adding your domain to CORS Origins in Sanity Manage is good practice for accessing the Data API, the Asset CDN should serve images with appropriate CORS headers automatically. That said, it doesn't hurt to ensure your production domain is properly configured in Settings > API > CORS Origins with the "Allow credentials" option enabled if you're using authentication tokens elsewhere in your app.

If Browser Cache Isn't the Issue

If clearing caches doesn't resolve it, the issue may be:

• A service worker or proxy in your application stack
• A CDN or caching layer in front of your application
• Network-level caching (corporate proxy, ISP cache, etc.)

The Sanity Asset CDN should be serving assets with permissive CORS headers by default, so persistent issues after clearing browser state likely indicate something in your network or application stack is interfering with the requests.