Erros do CORS ao incorporar recursos de mídia do EDS entre origens
Este artigo explica por que os erros do CORS ocorrem ao incorporar o SVG e outros recursos de mídia de pontos de extremidade de mídia do Adobe Experience Manager Edge Delivery Services (EDS) entre origens e descreve as abordagens compatíveis para resolver esses erros.
Descrição description
Ao incorporar componentes do EDS, como HTML, JavaScript, CSS ou ativos de mídia em um site de terceiros ou no CMS, erros de CORS (Cross-Origin Resource Sharing, Compartilhamento de recursos entre origens) ocorrem para ícones ou imagens do SVG referenciados por meio de imagem de máscara CSS. Isso ocorre porque os recursos de mídia fornecidos pela CDN EDS não incluem o Access-Control-Allow-Origin cabeçalho, enquanto os recursos HTML e JS fazem isso. Como resultado, os navegadores bloqueiam solicitações entre origens para esses ativos de mídia, resultando em erros como: Nenhum cabeçalho ‘Access-Control-Allow-Origin’ está presente no recurso solicitado.
Ambiente
Adobe Experience Manager (AEM) Edge Delivery Services (EDS), todas as versões
Sintomas
- Erros do CORS nas ferramentas de desenvolvedor do navegador ao carregar o SVG ou outros ativos de mídia de pontos de extremidade de mídia entre origens
- Os recursos HTML e JS da EDS incluem o cabeçalho
Access-Control-Allow-Origin, mas os recursos de mídia não. - Os casos de uso afetados incluem a incorporação de componentes do EDS em páginas do CMS de terceiros, nas quais os URLs de ativos são construídos como URLs absolutos para o EDS CDN.
Causa
A otimização de imagem/barramento de mídia do Fastly que serve os recursos de mídia EDS não oferece suporte à configuração personalizada do cabeçalho CORS. Essa limitação está fora do escopo da Configuração do Site, das transformações de resposta do cdn.yaml e da API de Administração. O acesso direto entre origens a esses endpoints não é suportado; todos os recursos devem ter a mesma origem por meio de um proxy CDN para evitar a imposição de CORS no navegador.
Resolução resolution
Siga as etapas abaixo para resolver o problema:
- Identifique o CDN ou domínio que atende à origem do EDS (por exemplo: o CDN da sua organização que faz solicitações de proxy para o EDS CDN).
- Atualize a lógica do componente EDS para que todos os URLs de ativos (incluindo os usados para imagem de máscara CSS) façam referência ao seu domínio CDN em vez de URLs CDN EDS diretos.
- Verifique se o CDN está configurado para fazer solicitações de proxy para a origem de EDS e definir os cabeçalhos CORS apropriados (como
Access-Control-Allow-Origin: * ) para recursos de mídia. - Se você não controlar o CMS de terceiros ou seu CDN, considere configurar seu próprio CDN como proxy para o CDN do EDS, configurar o CORS nesse CDN e ter os recursos de mídia de acesso do CMS por meio de seu CDN.
- Depois de fazer essas alterações, verifique se todas as solicitações de mídia são atendidas na mesma origem da página de incorporação e se os erros do CORS não aparecem mais nas ferramentas de desenvolvedor do navegador.