A fonte da origem foi impedida de carregar pela política de compartilhamento de recursos entre origens

Estou recebendo o seguinte erro em alguns navegadores Chrome, mas não em todos. Não tenho certeza de qual é o problema neste momento.

A fonte da origem ' https://ABCDEFG.cloudfront.net ' foi impedida de carregar pela política de Compartilhamento de Recursos de Origem Cruzada: Nenhum cabeçalho 'Acesso-Controle-Permitir-Origem' está presente no recurso solicitado. Portanto, a origem ' https://sub.domain.com ' não é permitida.

Eu tenho a seguinte configuração do CORS no S3

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

O pedido

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Todas as outras solicitações do Cloudfront / S3 funcionam corretamente, incluindo arquivos JS.

Adicione esta regra ao seu .htaccess

Header add Access-Control-Allow-Origin "*" 

ainda melhor, como sugerido por @david thomas, você pode usar um valor de domínio específico, por exemplo

Header add Access-Control-Allow-Origin "your-domain.com"

O Chrome desde ~ setembro / outubro de 2014 sujeita as fontes às mesmas verificações CORS que o Firefox fez em https://code.google.com/p/chromium/issues/detail?id=286681 . Há uma discussão sobre isso em https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Dado que, para as fontes, o navegador pode fazer uma verificação prévia , sua política do S3 também precisa do cabeçalho de solicitação de cors . Você pode verificar sua página, digamos, Safari (que atualmente não faz verificação de fontes no CORS) e Firefox (o que faz) para verificar novamente este é o problema descrito.

Consulte Resposta de estouro de pilha no Amazon S3 CORS (compartilhamento de recursos de origem cruzada) e carregamento de fonte entre domínios do Firefox para obter detalhes do Amazon S3 CORS.

Nota: em geral, como isso se aplicava apenas ao Firefox, pode ajudar a procurar o Firefox em vez do Chrome.

Consegui resolver o problema simplesmente adicionando <AllowedMethod>HEAD</AllowedMethod>à política CORS do S3 Bucket.

Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Nginx:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3:

1. Selecione seu balde
2. Clique nas propriedades no canto superior direito
3. Permissões => Editar configuração do Cors => Salvar
4. Salve 

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

Em 26 de junho de 2014, a AWS lançou o comportamento adequado de Vary: Origin no CloudFront. Agora, você apenas

Defina uma configuração do CORS para seu bucket S3:

<AllowedOrigin>*</AllowedOrigin>

No CloudFront -> Distribuição -> Comportamentos para essa origem, use a opção Encaminhar cabeçalhos: lista de permissões e coloque na lista branca o cabeçalho 'Origem'.

Aguarde ~ 20 minutos enquanto o CloudFront propaga a nova regra

Agora sua distribuição do CloudFront deve armazenar em cache respostas diferentes (com cabeçalhos CORS adequados) para cabeçalhos de origem do cliente diferentes.

A única coisa que funcionou para mim (provavelmente porque eu tinha inconsistências com o uso de www.):

Cole isso no seu arquivo .htaccess:

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

Eu tive o mesmo problema e esse link forneceu a solução para mim:

http://www.holovaty.com/writing/cors-ie-cloudfront/

A versão curta é:

1. Editar a configuração do S3 CORS (meu exemplo de código não foi exibido corretamente)
   Nota: Isso já foi feito na pergunta original
   Nota: o código fornecido não é muito seguro, mais informações na página vinculada.
2. Vá para a guia "Comportamentos" da sua distribuição e clique para editar
3. Altere "Encaminhar cabeçalhos" de "Nenhum (melhora o armazenamento em cache)" para "Lista de permissões".
4. Adicione "Origem" à lista "Cabeçalhos da lista de permissões"
5. Salve as alterações

Sua distribuição na nuvem será atualizada, o que leva cerca de 10 minutos. Depois disso, tudo deve ficar bem, você pode verificar verificando se as mensagens de erro relacionadas ao CORS desapareceram do navegador.

Para aqueles que usam produtos Microsoft com um arquivo web.config:

Mesclar isso com o seu web.config.

Para permitir em qualquer domínio, substitua value="domain"porvalue="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

Se você não tem permissão para editar o web.config, adicione esta linha ao seu código do servidor.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

Há uma boa redação aqui .

Configurar isso no nginx / apache é um erro.
Se você estiver usando uma empresa de hospedagem, não poderá configurar a borda.
Se você estiver usando o Docker, o aplicativo deverá ser independente.

Observe que alguns exemplos usam, connectHandlersmas isso apenas define cabeçalhos no documento. O uso rawConnectHandlersse aplica a todos os ativos atendidos (fontes / css / etc).

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

Este seria um bom momento para analisar a política do navegador, como enquadramento etc.

Basta adicionar o uso de origem no seu se você usar o node.js. como servidor ...

como isso

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Precisamos de resposta para a origem

A solução de trabalho para o heroku está aqui http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (aspas a seguir):

Abaixo está exatamente o que você pode fazer se estiver executando o aplicativo Rails no Heroku e usando o Cloudfront como sua CDN. Foi testado no Ruby 2.1 + Rails 4, pilha Heroku Cedar.

Adicionar cabeçalhos HTTP CORS (Access-Control- *) aos recursos de fonte

• Adicione gema font_assetsao Gemfile.
• bundle install
• Adicionar config.font_assets.origin = '*'a config/application.rb. Se você deseja um controle mais granular, pode adicionar diferentes valores de origem a diferentes ambientes, por exemplo,config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Empurre o código para o Heroku.

Configurar o Cloudfront para encaminhar cabeçalhos HTTP do CORS

No Cloudfront, selecione sua distribuição, na guia "comportamento", selecione e edite a entrada que controla a entrega das fontes (para o aplicativo Rails mais simples, você tem apenas uma entrada aqui). Altere os cabeçalhos avançados de "Nenhum" para "Lista de permissões". E adicione os seguintes cabeçalhos à lista de permissões:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

Salve e pronto!

Advertência: Descobri que, às vezes, o Firefox não atualiza as fontes, mesmo que o erro do CORS acabe. Nesse caso, continue atualizando a página algumas vezes para convencer o Firefox de que você está realmente determinado.