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


159

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.


5
Estou tendo o mesmo problema ... Eu comecei a notar que após a atualização para o Chrome 37.0.2062.94
Kirley

Após atualizar a configuração do CORS, renomeei os ativos e consegui fazê-lo funcionar. Portanto, 1) a configuração do CORS é aplicada apenas na criação do arquivo (não atualização) OU 2) a configuração do CORS é armazenada em cache no Cloudfront. Vou postar isso como resposta se outros puderem confirmar que também funciona para eles.
Dallas Clark

1
Só notei isso no Chrome v. 37.0.2062.94, mas não em uma versão anterior. Eu não tenho uma configuração CORS no S3, então isso não deveria estar acontecendo, certo?
precisa saber é o seguinte

1
@ Ghopper21, você precisa da configuração correta do CORS. Teste no firefox e isso lhe dará (provavelmente) o mesmo resultado.
precisa saber é o seguinte

1
@RichPeck - corrija adicionando a configuração CORS correta ao S3 (ou, se você criar automaticamente seu CDN a partir da fonte, é um pouco mais complicado - você deve adicionar os cabeçalhos apropriados e invalidar as fontes em cache) ... stackoverflow.com / questions / 12229844 /… veja a resposta abaixo para mais detalhes
Tim Diggins

Respostas:


87

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"

1
Oi, qual é a diferença Header set Access-Control-Allow-Origin "*"? Graças
NineCattoRules

8
para pessoas do Windows, defina <add name = "Access-Control-Allow-Origin" value = "*" /> em <customHeaders> no arquivo web.config. Tenha um bom dia
Arsalan Saleem

2
@ Sim, a diferença é que, com "add", o cabeçalho de resposta é adicionado ao conjunto de cabeçalhos existente, mesmo que esse cabeçalho já exista. Isso pode resultar em dois (ou mais) cabeçalhos com o mesmo nome; enquanto que com "set" o cabeçalho da resposta é definido, substituindo qualquer cabeçalho anterior por esse nome. Nesse caso, é a mesma causa * inclui todos eles.
Giovanni Di Gregorio

@GiovanniDiGregorio Obrigado pela boa informação!
NineCattoRules

21
Apenas notar Access-Control-Allow-Origin "*"é potencialmente inseguro, pois abre o domínio para o acesso javascript de qualquer domínio. Você deve usar um valor de domínio específico, por exemplo, Access-Control-Allow-Origin "http://example1.com"consulte também stackoverflow.com/a/10636765/583715 para obter uma boa explicação.
David Thomas

58

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.


Obrigado por esta resposta, parece que pode ser um problema para muitos outros. Embora meu problema estivesse ocorrendo em uma compilação estável do Chrome.
Dallas Clark

45
Isso está acontecendo no Chrome agora.
justingordon

Enquanto as pessoas continuam se referindo (inclusive a mim!) A essa resposta, tornei-a menos histórica e mais relevante até os dias atuais.
Tim Diggins

1
Também para sua informação, descobri que uma mensagem de erro "foi impedida de carregar pela política de compartilhamento de recursos entre origens: Nenhum cabeçalho 'Acesso-Controle-Permitir-Origem' está presente no recurso solicitado. Origem" estava realmente relacionado a caminho para um arquivo de fonte no meu servidor original e o cloudfront é redirecionado para a página inicial do meu servidor (e a resposta de redirecionamento ou a página inicial não tinham os cabeçalhos CORS). Confuso, mas resolvido usando o caminho correto para o arquivo de fonte real (não é um problema do CORS, a rigor).
Tim Diggins

Olá, @DallasClark, você pode escolher uma resposta aceita para sua pergunta. Obrigado Tim, seus links e explicações foram úteis em minha experiência. Felicidades.
Dan

46

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>

não tenho certeza sobre a segurança no entanto, seria bom se alguém tinha algumas informações sobre isso ..
Özer S.

Essa mudança precisa de tempo para se propagar? Acabei de adicionar <AllowedMethod>HEAD</AllowedMethod>minha política de CORS no balde e ainda não está funcionando.
Salvatore Iovene

normalmente não, deve levar no máx. alguns minutos
Özer S.


12

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.


1
Isso não parece funcionar, você tem mais detalhes? Eu ativei isso, mas ainda tenho exatamente o mesmo problema.
Jaco Pretorius

7

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


1
Impressionante! Muito obrigado!
Rotimi

1
Como seu código foi detalhado, demorou algum tempo para eu passar por ele, mas aprendi algumas coisas. Apliquei parte dele para ajustar minha solução. Funcionou.
Mohammed Moinuddin Waseem

3

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.


2

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");

Merece uma votação por nos lembrar de usuários do Windows.
mohrtan

Estou usando o núcleo do asp.net, como adiciono isso ao arquivo appsettings.json?
Yusuff Sodiq

1

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.


0

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


-5

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.


4
Evite respostas apenas para links. Será útil se você puder copiar trechos relevantes do artigo vinculado para sua resposta. Obrigado.
bPratik
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.