Errori CORS durante l’incorporamento di risorse multimediali EDS tra origini diverse
Questo articolo spiega perché si verificano errori CORS quando si incorporano SVG e altre risorse multimediali da endpoint multimediali Adobe Experience Manager Edge Delivery Services (EDS) tra le origini e descrive gli approcci supportati per risolvere questi errori.
Descrizione description
Quando si incorporano componenti EDS come HTML, JavaScript, CSS o risorse multimediali in un sito di terze parti o in un CMS, si verificano errori CORS (Cross-Origin Resource Sharing) per le icone SVG o le immagini a cui si fa riferimento tramite un’immagine maschera CSS. Questo perché le risorse multimediali fornite dal CDN EDS non includono Access-Control-Allow-Origin intestazione, le risorse HTML e JS sì. Di conseguenza, i browser bloccano le richieste tra origini diverse per queste risorse multimediali, causando errori quali: nessuna intestazione ‘Access-Control-Allow-Origin’ presente nella risorsa richiesta.
Ambiente
Adobe Experience Manager (AEM) Edge Delivery Services (EDS), tutte le versioni
Sintomi
- Errori CORS negli strumenti di sviluppo del browser durante il caricamento di SVG o altre risorse multimediali da endpoint multimediali di origine diversa
- Le risorse HTML e JS da EDS includono l’intestazione
Access-Control-Allow-Origin, ma le risorse multimediali no. - I casi d’uso interessati includono l’incorporamento di componenti EDS in pagine CMS di terze parti, in cui gli URL delle risorse vengono costruiti come URL assoluti per la rete CDN EDS.
Causa
Il bus Fastly Image Optimization/Media che serve risorse multimediali EDS non supporta la configurazione personalizzata dell’intestazione CORS. Questa limitazione non rientra nell’ambito della configurazione del sito, delle trasformazioni di risposta cdn.yaml e dell’API amministratore. L’accesso diretto tra origini diverse a questi endpoint non è supportato; tutte le risorse devono essere servite con la stessa origine tramite un proxy CDN per evitare l’applicazione CORS per il browser.
Risoluzione resolution
Per risolvere il problema, segui i passaggi seguenti:
- Identifica la rete CDN o il dominio che gestisce l’origine EDS (ad esempio, la rete CDN dell’organizzazione che invia le richieste alla rete CDN EDS).
- Aggiorna la logica del componente EDS in modo che tutti gli URL di risorse (inclusi quelli utilizzati per l’immagine maschera CSS) facciano riferimento al dominio CDN invece che agli URL CDN EDS diretti.
- Verificare che la rete CDN sia configurata per fungere da proxy delle richieste all’origine EDS e per impostare le intestazioni CORS appropriate (ad esempio
Access-Control-Allow-Origin: * ) per le risorse multimediali. - Se non controlli il CMS di terze parti o la relativa rete CDN, puoi impostare una tua rete CDN come proxy per la rete CDN EDS, configurare CORS sulla rete CDN e fare in modo che le risorse multimediali di CMS accedano tramite la rete CDN.
- Dopo aver apportato queste modifiche, verifica che tutte le richieste multimediali siano gestite dalla stessa origine della pagina di incorporamento e che gli errori CORS non vengano più visualizzati negli strumenti di sviluppo del browser.