CORS errors when embedding EDS media resources cross-origin
This article explains why CORS errors occur when embedding SVG and other media resources from Adobe Experience Manager Edge Delivery Services (EDS) media endpoints cross-origin, and describes supported approaches to resolve these errors.
Description description
When embedding EDS components such as HTML, JavaScript, CSS, or media assets into a third-party site or CMS, CORS (Cross-Origin Resource Sharing) errors occur for SVG icons or images referenced via CSS mask-image. This is because media resources served from the EDS CDN don’t include the Access-Control-Allow-Origin header, while HTML and JS resources do. As a result, browsers block cross-origin requests for these media assets, leading to errors such as: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Environment
Adobe Experience Manager (AEM) Edge Delivery Services (EDS), all versions
Symptoms
- CORS errors in browser developer tools when loading SVG or other media assets from media endpoints cross-origin
- HTML and JS resources from EDS include the
Access-Control-Allow-Originheader, but media resources don’t. - Affected use cases include embedding EDS components into third-party CMS pages where asset URLs are constructed as absolute URLs to the EDS CDN.
Cause
The Fastly image optimization/media bus serving EDS media resources doesn’t support custom CORS header configuration. This limitation is outside the scope of Site Config, cdn.yaml response transformations, and the Admin API. Direct cross-origin access to these endpoints isn’t supported; all resources should be served same-origin via a CDN proxy to avoid browser CORS enforcement.
Resolution resolution
Follow the steps below to resolve the issue:
- Identify the CDN or domain that fronts your EDS origin (For example: your organization’s CDN that proxies requests to the EDS CDN).
- Update your EDS component logic so that all asset URLs (including those used for CSS mask-image) reference your CDN domain instead of direct EDS CDN URLs.
- Ensure your CDN is configured to proxy requests to the EDS origin and to set the appropriate CORS headers (such as
Access-Control-Allow-Origin: * ) for media resources. - If you don’t control the third-party CMS or its CDN, consider setting up your own CDN as a proxy to the EDS CDN, configure CORS on that CDN, and have the CMS access media resources through your CDN.
- After making these changes, verify that all media requests are served from the same origin as the embedding page and that CORS errors no longer appear in the browser developer tools.