S3 - Cabeçalho de controle de acesso-permissão de origem

Alguém conseguiu adicionar Access-Control-Allow-Originaos cabeçalhos de resposta? O que eu preciso é algo como isto:

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

Essa solicitação de obtenção deve conter na resposta, cabeçalho, Access-Control-Allow-Origin: *

Minhas configurações de CORS para o bucket são assim:

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

Como você pode esperar, não há Origincabeçalho de resposta.

Normalmente, tudo que você precisa fazer é "Adicionar configuração do CORS" nas propriedades do seu bucket.

O <CORSConfiguration>vem com alguns valores padrão. É tudo o que preciso para resolver seu problema. Basta clicar em "Salvar" e tente novamente para ver se funcionou. Caso contrário, você também pode tentar o código abaixo (da resposta alxrb), que parece ter funcionado para a maioria das pessoas.

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

Para mais informações, você pode ler este artigo em Editando permissão de bucket .

Eu estava tendo um problema semelhante ao carregar fontes da Web. Quando clicamos em 'adicionar configuração do CORS', nas propriedades do bucket, esse 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> 

Acabei de clicar em Salvar e funcionou, minhas fontes personalizadas da Web estavam sendo carregadas no IE e Firefox. Não sou especialista nisso, apenas pensei que isso poderia ajudá-lo.

Se sua solicitação não especificar um Origincabeçalho, o S3 não incluirá os cabeçalhos CORS na resposta. Isso realmente me impressionou, porque eu continuava tentando enrolar os arquivos para testar o CORS, mas o curl não inclui Origin.

@jordanstephens disse isso em um comentário, mas meio que se perdeu e foi uma solução muito fácil para mim.

Eu simplesmente adicionei o método HEAD e cliquei em salvar e ele começou a funcionar.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

Essa é uma maneira simples de fazer isso funcionar.

Sei que essa é uma pergunta antiga, mas ainda é difícil encontrar uma solução.

Para começar, isso funcionou para mim em um projeto criado com o Rails 4, Paperclip 4, CamanJS, Heroku e AWS S3.

Você deve solicitar sua imagem usando o crossorigin: "anonymous"parâmetro

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

Adicione o URL do seu site ao CORS no AWS S3. Aqui está uma referência da Amazon sobre isso. Praticamente, basta ir ao seu bucket e, em seguida, selecionar " Propriedades " nas guias à direita, abrir " guia Permissões e, em seguida, clicar em" Editar configuração do CORS ".

Originalmente, eu havia < AllowedOrigin>definido *. Basta alterar esse asterisco para o seu URL, incluindo opções como http://e https://em linhas separadas. Eu esperava que o asterisco aceite "Todos", mas aparentemente precisamos ser mais específicos do que isso.

É assim que me parece.

Vou apenas adicionar a esta resposta - acima - que resolveu meu problema.

Para definir o Ponto de distribuição do AWS / CloudFront para direcionar o cabeçalho de origem do CORS, clique na interface de edição do Ponto de distribuição:

Vá para a guia comportamentos e edite o comportamento, alterando "Cache com base nos cabeçalhos de solicitação selecionados" de Nenhum para Lista de permissões, e verifique se Originfoi adicionado à caixa de lista de permissões. Consulte Definindo o CloudFront para respeitar as configurações do CORS no AWS Docs para obter mais informações.

Veja as respostas acima. (mas eu também tinha um bug do chrome)

Não carregue e exiba a imagem na página no CHROME. (se você mais tarde criar uma nova instância)

No meu caso, carreguei imagens e as exibi na página. Quando eles foram clicados, criei uma nova instância deles:

// 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á havia armazenado em cache outra versão e NUNCA tentou buscar novamente a crossoriginversão (mesmo se eu estivesse usando crossoriginas imagens exibidas.

Para corrigir, eu adicionei ?crossoriginno final do URL da imagem (mas você pode adicionar ?blah, é apenas arbitrário alterar o status do cache) quando eu o carregava para a tela. Deixe-me saber se você encontrar uma correção melhor para o CHROME

Eu estava tendo problemas semelhantes ao carregar modelos 3D do S3 em um visualizador 3D javascript (3D HOP), mas estranhamente apenas em determinados tipos de arquivo (.nxs).

O que o corrigiu foi mudar AllowedHeaderdo padrão Authorizationpara *a 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>

Como outros estados, você precisa primeiro da configuração do CORS no seu bucket S3:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Mas no meu caso, depois de fazer isso, ainda não estava funcionando. Eu estava usando o Chrome (provavelmente o mesmo problema com outros navegadores).

O problema era que o Chrome estava armazenando em cache a imagem com os cabeçalhos (sem conter os dados do CORS) ; portanto, independentemente do que eu tentasse alterar na AWS, eu não veria meus cabeçalhos do CORS.

Após limpar o cache do Chrome e recarregar a página , a imagem apresentava os cabeçalhos CORS esperados

Cheguei a esse segmento e nenhuma das soluções acima se aplica ao meu caso. Acontece que eu simplesmente tive que remover uma barra à direita da <AllowedOrigin>URL na configuração CORS do meu bucket.

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>

Espero que isso economize alguém para puxar o cabelo.

Eu tentei todas as respostas acima e nada funcionou. Na verdade, precisamos de três etapas das respostas acima para que funcionem:

1. Como sugerido por Flavio; adicione a configuração do CORS no seu bucket:

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

2. Na imagem; mencionar crossorigin:

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

3. Você está usando uma CDN? Se tudo funcionar bem, conecte-se ao servidor de origem, mas NÃO via CDN; isso significa que você precisa de alguma configuração no CDN, como aceitar cabeçalhos CORS. A configuração exata depende de qual CDN você está usando.

1. Defina a configuração do CORS nas configurações de Permissões para seu bucket 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 CORS somente quando a solicitação http tiver o Origincabeçalho.

3. O CloudFront não encaminha o Origincabeçalho por padrão

   Você precisa colocar o Origincabeçalho da lista de permissões nas configurações de comportamento da sua distribuição do CloudFront.

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

Por que <AllowedHeader>*</AllowedHeader>está funcionando e <AllowedHeader>Authorization</AllowedHeader>não?

fwuensche "resposta" está correto para configurar uma CDN; fazendo isso, removi o MaxAgeSeconds.

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

No S3 Management Console mais recente, quando você clica na configuração do CORS na guia Permissões, ele mostra uma configuração padrão do CORS de amostra. Esta configuração não está realmente ativa, no entanto! Você precisa primeiro clicar em Salvar para ativar o CORS.

Levei muito tempo para descobrir isso, espero que isso poupe alguém a algum tempo.

Essa configuração resolveu o problema para mim:

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

Aviso - Hack.

Se você usar o S3Image para exibir uma imagem e posteriormente tentar obtê-la por meio de busca, talvez para inseri-la em um PDF ou fazer algum outro processamento, saiba que o Chrome armazenará em cache o primeiro resultado que não requer uma solicitação de comprovação do CORS e tente obter o mesmo recurso sem a solicitação de pré-comprovação de OPÇÕES para a busca e falhará devido a restrições do navegador.

Outra maneira de contornar isso é garantir que a S3Image inclua uma origem cruzada: 'use-credentials', conforme mencionado acima. No arquivo que você usa S3Image (eu tenho um componente que cria uma versão em cache do S3Image, para que seja o local perfeito para mim), substitua o método protótipo imageEl do S3Image para forçá-lo a incluir esse atributo.

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

O problema 403 está resolvido. Que dor agride!

<AllowedOrigin>*</AllowedOrigin>

não é uma boa ideia, pois com * você concede a qualquer site acesso aos arquivos no seu bucket. Em vez disso, você deve especificar qual origem é exatamente permitida para usar recursos do seu bucket. Normalmente, esse é o seu nome de domínio, como

<AllowedOrigin>https://www.example.com</AllowedOrigin>

ou se você deseja incluir todos os subdomínios possíveis:

<AllowedOrigin>*.example.com</AllowedOrigin>

Abaixo está a configuração e é bom trabalhar para mim. Espero que ajude a resolver seu problema no AWS S3.

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

A resposta aceita funciona, mas parece que se você for diretamente ao recurso, não haverá cabeçalhos de origem cruzada. Se você estiver usando o cloudfront, isso fará com que o cloudfront armazene em cache a versão sem cabeçalhos. Quando você acessa um URL diferente que carrega esse recurso, você obtém esse problema de origem cruzada.

Se suas configurações do CORS não o ajudarem.

Verifique se a configuração S3 está correta. Eu tinha um nome de bloco inválido Storage.configure. Usei um nome abreviado de bucket e causou um erro:

Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado.

Primeiro, ative o CORS no seu balde S3. Use este código como orientação:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

2) Se ainda não estiver funcionando, adicione também um "crossorigin" com um valor "*" às suas tags img. Coloque isso no seu arquivo html:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

Pelo que vale, tive um problema semelhante - ao tentar adicionar uma origem permitida específica (não *).

Acontece que eu tive que corrigir

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

para

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(observe o último slah no URL)

Espero que isso ajude alguém