Errores de CORS al incrustar recursos de medios EDS de origen cruzado
En este artículo se explica por qué se producen errores de CORS al incrustar SVG y otros recursos de medios desde puntos finales de medios de Adobe Experience Manager Edge Delivery Services (EDS) de origen cruzado, y se describen los enfoques admitidos para resolver estos errores.
Descripción description
Al incrustar componentes EDS como HTML, JavaScript, CSS o recursos de medios en un sitio de terceros o CMS, se producen errores CORS (Intercambio de recursos de origen cruzado) para iconos de SVG o imágenes a las que se hace referencia mediante una imagen de máscara CSS. Esto se debe a que los recursos de medios prestados desde la CDN de EDS no incluyen Access-Control-Allow-Origin , mientras que los recursos de HTML y JS sí lo hacen. Como resultado, los exploradores bloquean las solicitudes de origen cruzado para estos recursos multimedia, lo que provoca errores como: No hay ningún encabezado ‘Access-Control-Allow-Origin’ en el recurso solicitado.
Entorno
Adobe Experience Manager (AEM) Edge Delivery Services (EDS), todas las versiones
Síntomas
- Errores CORS en las herramientas para desarrolladores de navegadores al cargar SVG u otros recursos de medios desde extremos de medios de origen cruzado
- Los recursos de HTML y JS de EDS incluyen el encabezado
Access-Control-Allow-Origin, pero los recursos multimedia no. - Los casos de uso afectados incluyen la incrustación de componentes de EDS en páginas de CMS de terceros, donde las URL de recursos se construyen como URL absolutas a la CDN de EDS.
Causa
El bus de medios/optimización de imágenes rápida que sirve a los recursos de medios de EDS no admite la configuración personalizada del encabezado CORS. Esta limitación está fuera del ámbito de la configuración del sitio, las transformaciones de respuesta cdn.yaml y la API de administración. No se admite el acceso directo entre orígenes a estos extremos; todos los recursos deben proporcionarse con el mismo origen a través de un proxy CDN para evitar la aplicación CORS del explorador.
Resolución resolution
Siga los pasos a continuación para resolver el problema:
- Identifique la CDN o el dominio que se encuentra delante del origen de EDS (por ejemplo: la CDN de su organización que envía solicitudes a la CDN de EDS).
- Actualice la lógica del componente EDS para que todas las URL de recursos (incluidas las utilizadas para la imagen de máscara CSS) hagan referencia al dominio de CDN en lugar de a las URL de CDN de EDS directas.
- Asegúrese de que la CDN esté configurada para solicitudes proxy al origen de EDS y para establecer los encabezados CORS adecuados (como
Access-Control-Allow-Origin: * ) para los recursos de medios. - Si no controla la CMS de terceros o su CDN, considere la posibilidad de configurar su propia CDN como proxy a la CDN de EDS, configurar CORS en esa CDN y hacer que CMS acceda a los recursos multimedia a través de su CDN.
- Después de realizar estos cambios, compruebe que todas las solicitudes de medios se proporcionen desde el mismo origen que la página de incrustación y que los errores CORS ya no aparezcan en las herramientas para desarrolladores del explorador.