S3-Access-Control-Allow-Origin Header

Eu estava a ter um problema semelhante com o carregamento de fontes web, quando carreguei em 'Adicionar configuração de CORS', nas propriedades do balde, este código já estava lá:

<?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> 

Tem de pedir a sua imagem usando o parâmetro crossorigin: "anonymous".

    <img href="your-remote-image.jpg" crossorigin="anonymous"> 

Adicione o URL do seu site ao CORS no AWS S3. Aqui está uma referção da Amazon sobre isso. Basicamente, vai para o teu balde, e depois seleccione " propriedades "das páginas à direita, abra "permissões e depois carregue em"editar a configuração dos CORS".

Originalmente, eu tinha < AllowedOrigin> programado para *. Basta mudar esse asterisco para o seu URL, certifique-se de incluir opções como http:// e https:// em linhas separadas. Esperava que o asterisco aceitasse "tudo", mas aparentemente temos de ser mais específicos do que isso.

Se o seu pedido não indicar um cabeçalho Origin, o S3 não incluirá os cabeçalhos do CORS na resposta. Isso realmente me impressionou porque eu continuei tentando enrolar os arquivos para testar os CORS, mas o curl não inclui {[[0]}.

Ver acima as respostas. (mas eu também tinha um bug cromado)

Não carregues e mostres a imagem na página do CHROME. (se você vai mais tarde criar uma nova instância)

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

O Chrome já tinha Cache outra versão e nunca tentou obter de novo a versão crossorigin (mesmo que estivesse a usar o crossorigin nas imagens apresentadas.

Para consertar, eu adicionei ?crossorigin ao final do url da imagem (mas você pode adicionar ?blah, é apenas arbitrário alterar o estado da 'cache') quando a carreguei para a área de desenho.. Avisa-me se encontrares uma solução melhor para o cromado.

Vou adicionar a esta resposta –acima–que resolveu o meu problema.

Para configurar o ponto de distribuição AWS/CloudFront para rodar o cabeçalho de origem do CORS, carregue na interface de edição para o ponto de Distribuição:

Vá para a página behaviors e edite o comportamento, mudando os cabeçalhos da lista branca de nenhum para a lista branca, depois certifique-se que Origin é adicionado à caixa da lista branca.

Eu estava tendo problemas semelhantes Carregando modelos 3D de S3 em um visualizador 3D javascript (3D HOP), mas estranhamente o suficiente apenas com certos tipos de arquivos (.nxs).

O que o corrigiu para mim foi mudar AllowedHeader do padrão Authorization para * na configuração do CORS:

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

1. Defina a configuração do CORS na configuração das permissões para o seu balde S3

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

2. O S3 adiciona cabeçalhos de CORS apenas quando o pedido de http tem o cabeçalho Origin.

3. CloudFront não avança cabeçalho Origin por omissão

   Você precisa de whitelist Origin cabeçalho na configuração do comportamento para a sua distribuição da frente da nuvem.

Arranjei-o escrevendo o seguinte:

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

Porque <AllowedHeader>*</AllowedHeader> está a funcionar e <AllowedHeader>Authorization</AllowedHeader> não?

1. Tal como sugerido por Flavio; adicione configuração de CORS no seu balde:

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

2. Na imagem; mencionar os caracteres cruzados:

   <img href="abc.jpg" crossorigin="anonymous">
   

3. Estás a usar CDN? Se tudo funcionar bem ligando-se ao servidor de origem, mas não através de CDN; isso significa que você precisa de alguma configuração no seu CDN como aceitar os cabeçalhos de CORS. A configuração exacta depende de qual RDN que está a usar.

Falha:

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

Vitórias:

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

Fwuensche "answer" é corret para configurar um CDN; ao fazer isto, removi Maxagesegundos.

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

Na última consola de gestão S3, quando carregar na configuração do CORS na página de permissões, irá mostrar uma configuração predefinida do exemplo dos CORS. Esta configuração é não realmente activa, no entanto! Você tem que primeiro clicar em Salvar, a fim de ativar o CORS.