EDS 미디어 리소스를 원본 간에 포함할 때 CORS 오류 발생
이 문서에서는 SVG 및 Adobe Experience Manager Edge Delivery Services(EDS) 미디어 끝점의 다른 미디어 리소스를 교차 출처로 포함할 때 CORS 오류가 발생하는 이유를 설명하고 이러한 오류를 해결하기 위해 지원되는 접근 방식에 대해 설명합니다.
설명 description
HTML, JavaScript, CSS 또는 미디어 에셋과 같은 EDS 구성 요소를 서드파티 사이트 또는 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헤더가 포함되어 있지만 미디어 리소스에는 포함되어 있지 않습니다. - 영향을 받는 사용 사례에는 자산 URL이 EDS CDN에 대한 절대 URL로 구성되는 서드파티 CMS 페이지에 EDS 구성 요소를 포함하는 경우가 있습니다.
원인
EDS 미디어 리소스를 제공하는 Fastly 이미지 최적화/미디어 버스는 사용자 지정 CORS 헤더 구성을 지원하지 않습니다. 이 제한은 사이트 구성, cdn.yaml 응답 변환 및 관리 API의 범위를 벗어납니다. 이러한 엔드포인트에 대한 직접 교차 원본 액세스는 지원되지 않습니다. 브라우저 CORS 시행을 방지하기 위해 CDN 프록시를 통해 모든 리소스를 동일한 원본 간에 제공해야 합니다.
해결 방법 resolution
아래 단계에 따라 문제를 해결하십시오.
- EDS 원본 앞에 있는 CDN 또는 도메인을 식별합니다(예: EDS CDN에 요청을 프록싱하는 조직의 CDN).
- 모든 자산 URL(CSS 마스크 이미지에 사용되는 자산 포함)이 직접 EDS CDN URL 대신 CDN 도메인을 참조하도록 EDS 구성 요소 논리를 업데이트합니다.
- CDN이 EDS 원본에 대한 요청을 프록시하고 미디어 리소스에 대한 적절한 CORS 헤더(예:
Access-Control-Allow-Origin: * )를 설정하도록 구성되어 있는지 확인하십시오. - 타사 CMS 또는 해당 CDN을 제어하지 않는 경우 자체 CDN을 EDS CDN의 프록시로 설정하고 해당 CDN에 CORS를 구성한 다음 CMS이 CDN을 통해 미디어 리소스에 액세스하도록 하십시오.
- 이러한 변경 작업을 수행한 후 모든 미디어 요청이 포함 페이지와 동일한 원본에서 제공되는지 그리고 브라우저 개발자 도구에 더 이상 CORS 오류가 표시되지 않는지 확인하십시오.