Ícones de Fonte Incrível que não estão sendo exibidos no Chrome, um problema de política de Compartilhamento de Recursos de Origem Cruzada relacionado ao MaxCDN

só notei em vários sites que os icons impressionantes da fonte não estão aparecendo no Google Chrome. O console mostra o seguinte erro:

A fonte de origem ‘ http://cdn.keywest.life ‘ foi bloqueada para carregamento por diretiva de Compartilhamento de Recursos de Origem Cruzada: Nenhum header ‘Access-Control-Allow-Origin’ está presente no recurso solicitado. A origem ‘ http://www.keywest.life ‘ não tem, portanto, access permitido.

Eu encontrei exatamente o mesmo problema em vários outros sites. Isso pode ser facilmente corrigido substituindo a própria referência CDN por:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

No entanto, esta não é a solução, apenas uma solução alternativa. Eu adoraria saber o motivo e a solução certa.

(a causa é a seguinte: o site está usando seu próprio CDN, fornecido pelo MaxCDN e tem a referência à fonte de fonts incríveis e estas não são carregadas pelo Chrome, se você estiver carregando o mesmo recurso do recurso Bootstrapcdn – mencionado acima – trabalho)

aqui está um exemplo do problema (no menu e nos icons sociais no rodapé: http://www.keywestnight.com/fantasy-fest )

Obrigado por qualquer ajuda / explanatioon!

Este é o método de trabalho para permitir o access de todos os domínios para webfonts :

# Allow access from all domains for webfonts. # Alternatively you could only whitelist your # subdomains like "subdomain.example.com".   Header set Access-Control-Allow-Origin "*"   

O problema não é com o arquivo CSS, tem a ver com a forma como o arquivo de fonte é servido. O arquivo font-awesome.min.css tem linhas como

 @font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot?v=4.2.0'); src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal} 

que fazem com que o navegador solicite um arquivo de fonte apropriado (eot, woff, ttf ou svg) do mesmo servidor que o arquivo CSS. Isso é lógico e correto.

No entanto, quando o navegador solicita esse arquivo de fonte do cdn.keywest.life , ele lê os headers de um header Access-Control-Allow-Origin e não o encontra, de forma que ele forneça essa mensagem de erro. (Isso parece um erro do navegador para mim, porque está vindo do mesmo servidor que o arquivo CSS).

Em vez disso, quando você usa maxcdn.bootstrapcdn.com a resposta inclui o header Access-Control-Allow-Origin:* e o navegador aceita esse arquivo de fonte. Se o seu servidor de cdn incluísse este header, ele também funcionaria.

Se você tem um servidor Apache, veja esta resposta: Font-awesome não exibindo corretamente no Firefox / como vender via CDN?

Nenhuma das respostas funcionou para mim, eu tive que criar uma regra de borda em maxcnd back office (que altera o arquivo de configuração na sua zona)

Mais informação aqui

https://www.maxcdn.com/one/tutorial/edge-rules-recipes/ https://www.maxcdn.com/one/tutorial/create-a-rule/

Eu uso um CDN que não me permite modificar sua resposta, então eu modifiquei font-awesome.min.css , substituindo o caminho relativo pelo caminho absoluto e funcionou.

Esta questão de acessar resources de fonts incríveis tem sido um problema para muitas pessoas sem uma explicação abrangente e resolução para o problema.

O que é o CORS:

O CORS (Cross-Origin Resource Sharing) é um mecanismo que usa headers HTTP adicionais para permitir que um agente de usuário obtenha permissão para acessar resources selecionados de um servidor em uma origem diferente (domínio) do que o site atualmente em uso. Um agente do usuário faz uma solicitação HTTP de origem cruzada quando solicita um recurso de um domínio, protocolo ou porta diferente daquele do qual o documento atual foi originado.

https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CORS

O problema:

O problema decorre de como as fonts impressionantes são carregadas.

 @font-face{ font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot?v=4.2.0'); src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal } 

As fonts são carregadas através da folha de estilo (CSS). A situação que temos aqui é:

Acesso a ativos da Web

A solução:

Embora as regras CORS tenham sido criadas em seu armazenamento de arquivos, por exemplo, S3, e o access ao recurso tenha sido concedido ao domínio em questão, quando o CDN tenta carregar as fonts especificadas no CSS, a origem / domínio especificado ao carregar essas fonts é o o CDN mas nenhum access CORS deu ao domínio CDN.

Crie uma regra CORS para o domínio CDN.

Intereting Posts