Erreurs CORS lors de l’incorporation de ressources multimédias EDS entre origines
Cet article explique pourquoi des erreurs CORS se produisent lors de l’incorporation de SVG et d’autres ressources multimédias à partir de points d’entrée de médias Adobe Experience Manager Edge Delivery Services (EDS) entre origines, et décrit les approches prises en charge pour résoudre ces erreurs.
Description description
Lors de l’incorporation de composants EDS tels qu’HTML, JavaScript, CSS ou des ressources multimédias dans un site tiers ou un CMS, des erreurs CORS (Cross-Origin Resource Sharing) se produisent pour les icônes SVG ou les images référencées via CSS mask-image. En effet, les ressources multimédias diffusées à partir du réseau CDN EDS n’incluent pas le Access-Control-Allow-Origin header, alors que les ressources HTML et JS le font. Par conséquent, les navigateurs bloquent les requêtes cross-origin pour ces ressources multimédias, ce qui entraîne des erreurs telles que : Aucun en-tête « Access-Control-Allow-Origin » n’est présent sur la ressource demandée.
Environnement
Adobe Experience Manager (AEM) Edge Delivery Services (EDS), toutes versions
Symptômes
- Erreurs CORS dans les outils de développement du navigateur lors du chargement de ressources SVG ou d’autres médias à partir de points d’entrée de médias à l’origine croisée
- Les ressources HTML et JS d’EDS incluent l’en-tête
Access-Control-Allow-Origin, mais pas les ressources multimédias. - Les cas d’utilisation affectés incluent l’incorporation de composants EDS dans des pages CMS tierces où les URL de ressources sont construites en tant qu’URL absolues sur le réseau CDN EDS.
Cause
Le bus d’optimisation d’image/de média Fastly qui diffuse les ressources multimédias EDS ne prend pas en charge la configuration d’en-tête CORS personnalisée. Cette limitation n’entre pas dans le cadre de la configuration du site, des transformations de réponse cdn.yaml et de l’API Admin. L’accès direct entre origines multiples à ces points d’entrée n’est pas pris en charge. Toutes les ressources doivent être diffusées de la même origine via un proxy CDN pour éviter l’application CORS du navigateur.
Résolution resolution
Suivez les étapes ci-dessous pour résoudre le problème :
- Identifiez le réseau CDN ou le domaine qui fait face à votre origine EDS (par exemple : le réseau CDN de votre organisation qui envoie par proxy les requêtes au réseau CDN EDS).
- Mettez à jour la logique de votre composant EDS de sorte que toutes les URL de ressource (y compris celles utilisées pour CSS mask-image) référencent votre domaine CDN au lieu des URL de réseau CDN EDS directes.
- Assurez-vous que votre réseau CDN est configuré pour traiter les requêtes proxy vers l’origine EDS et pour définir les en-têtes CORS appropriés (tels que
Access-Control-Allow-Origin: * ) pour les ressources multimédias. - Si vous ne contrôlez pas le réseau CMS tiers ou son réseau CDN, envisagez de configurer votre propre réseau CDN en tant que proxy du réseau CDN EDS, configurez CORS sur ce réseau CDN et demandez au CMS d’accéder aux ressources multimédias via votre réseau CDN.
- Après avoir apporté ces modifications, vérifiez que toutes les requêtes de média sont diffusées à partir de la même origine que la page d’incorporation et que les erreurs CORS n’apparaissent plus dans les outils de développement du navigateur.