文档Experience Cloud KCS

嵌入EDS媒体资源跨源时出现CORS错误

最近更新： 2026年8月20日

本文介绍了在从Adobe Experience Manager Edge Delivery Services (EDS)跨域媒体端点嵌入SVG和其他媒体资源时发生CORS错误的原因，并介绍了受支持的解决这些错误的方法。

描述 description

将EDS组件（如HTML、JavaScript、CSS或媒体资产）嵌入到第三方网站或CMS时，会出现SVG图标或通过CSS蒙版图像引用的图像的CORS（跨源资源共享）错误。 这是因为从EDS CDN提供的媒体资源不包括Access-Control-Allow-Origin 标头，而HTML和JS资源则可用。 因此，浏览器会阻止跨域请求这些媒体资产，从而导致错误，例如：请求的资源上不存在“Access-Control-Allow-Origin”标头。

环境

Adobe Experience Manager (AEM) Edge Delivery Services (EDS)，所有版本

症状

  • 从跨源的媒体端点加载SVG或其他媒体资产时，浏览器开发人员工具中出现CORS错误
  • EDS中的HTML和JS资源包含Access-Control-Allow-Origin标头，但媒体资源不包含。
  • 受影响的用例包括将EDS组件嵌入到第三方CMS页面中，其中资产URL被构造为指向EDS CDN的绝对URL。

原因

服务EDS媒体资源的Fastly图像优化/媒体总线不支持自定义CORS标头配置。 此限制超出站点配置、cdn.yaml响应转换和管理员API的范围。 不支持对这些端点直接进行跨域访问；应通过CDN代理以同域方式提供所有资源，以避免实施浏览器CORS。

解决方法 resolution

请按照以下步骤解决问题：

  1. 确定位于您的EDS源之前的CDN或域（例如：您组织的CDN ，它将请求代理到EDS CDN）。
  2. 更新您的EDS组件逻辑，以便所有资产URL（包括用于CSS蒙版图像的URL）都引用您的CDN域，而不是引用直接EDS CDN URL。
  3. 确保将您的CDN配置为将请求代理到EDS源并为媒体资源设置适当的CORS标头（例如Access-Control-Allow-Origin： * ）。
  4. 如果您不控制第三方CMS或其CDN，请考虑将您自己的CDN设置为EDS CDN的代理，在该CDN上配置CORS，并让CMS通过您的CDN访问媒体资源。
  5. 进行这些更改后，请确认所有媒体请求均来自与嵌入页面相同的来源，并且CORS错误不再出现在浏览器开发人员工具中。
recommendation-more-help
experience-cloud-kcs-help-kbarticles