CORS-Fehler beim Einbetten von EDS-Medienressourcen über die Herkunft hinweg
In diesem Artikel wird erläutert, warum CORS-Fehler beim Einbetten von SVG und anderen Medienressourcen aus Adobe Experience Manager Edge Delivery Services (EDS)-Medienendpunkten über mehrere Ursprünge hinweg auftreten, und es werden unterstützte Ansätze zur Behebung dieser Fehler beschrieben.
Beschreibung description
Beim Einbetten von EDS-Komponenten wie HTML, JavaScript, CSS oder Medien-Assets in eine Website eines Drittanbieters oder in CMS treten CORS-Fehler (Cross-Origin Resource Sharing) bei SVG-Symbolen oder -Bildern auf, auf die über eine CSS-Bildmaske verwiesen wird. Dies liegt daran, dass die vom EDS-CDN bereitgestellten Medienressourcen die Access-Control-Allow-Origin nicht enthalten Header im Gegensatz zu HTML- und JS-Ressourcen. Daher blockieren Browser ursprungsübergreifende Anfragen für diese Medien-Assets, was zu Fehlern führt wie: In der angeforderten Ressource ist kein “Access-Control-Allow-Origin”-Header vorhanden.
Umgebung
Adobe Experience Manager (AEM) Edge Delivery Services (EDS), alle Versionen
Symptome
- CORS-Fehler in den Browser-Entwickler-Tools beim Laden von SVG oder anderen Medien-Assets von Medienendpunkten in verschiedenen Ländern
- HTML- und JS-Ressourcen von EDS enthalten die
Access-Control-Allow-OriginKopfzeile, Medienressourcen jedoch nicht. - Betroffene Anwendungsfälle sind beispielsweise das Einbetten von EDS-Komponenten in CMS-Seiten von Drittanbietern, auf denen Asset-URLs als absolute URLs zum EDS-CDN erstellt werden.
Ursache
Der Fastly Image Optimization/Media Bus für EDS-Medienressourcen unterstützt keine benutzerdefinierte CORS-Header-Konfiguration. Diese Einschränkung überschreitet den Rahmen der Site-Konfiguration, der cdn.yaml-Antworttransformationen und der Admin-API. Der direkte ursprungsübergreifende Zugriff auf diese Endpunkte wird nicht unterstützt. Alle Ressourcen sollten über einen CDN-Proxy derselben Herkunft bereitgestellt werden, um die Durchsetzung von CORS im Browser zu vermeiden.
Lösung resolution
Gehen Sie wie folgt vor, um das Problem zu beheben:
- Identifizieren Sie das CDN oder die Domain, die Ihren EDS-Ursprung anzeigt (z. B.: das CDN Ihres Unternehmens, das Anfragen an das EDS-CDN weiterleitet).
- Aktualisieren Sie die Komponentenlogik des EDS so, dass alle Asset-URLs (einschließlich der für die CSS-Maskenbild verwendeten) auf Ihre CDN-Domain verweisen, anstatt auf direkte EDS-CDN-URLs.
- Stellen Sie sicher, dass Ihr CDN so konfiguriert ist, dass Anfragen an den EDS-Ursprung weitergeleitet werden und die entsprechenden CORS-Header (z. B.
Access-Control-Allow-Origin: * ) für Medienressourcen festgelegt werden. - Wenn Sie die CMS eines Drittanbieters oder dessen CDN nicht steuern, sollten Sie Ihr eigenes CDN als Proxy für das CDN einrichten, CORS für dieses CDN konfigurieren und die CMS über Ihr CDN auf Medienressourcen zugreifen lassen.
- Nachdem Sie diese Änderungen vorgenommen haben, stellen Sie sicher, dass alle Medienanfragen von demselben Ursprung stammen wie die Einbettungsseite und dass CORS-Fehler nicht mehr in den Browser-Entwickler-Tools angezeigt werden.