文件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 Proxy以相同來源提供，以避免瀏覽器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