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

187

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.

Wowzaaa
fonte
4
Possível duplicado de stackoverflow.com/questions/17570100/...
Kevin Borders
1
Falta uma coisa: <ExposeHeader> Controle de acesso-Permitir origem </ExposeHeader>
Dimitry

Respostas:

197

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

amazon-screen-shot

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 .

Flavio Wuensche
fonte
4
Parece ser possível. Tente ler o link acima (na resposta) ou siga em frente para este: docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketPUTcors.html
Flavio
7
Obrigado. Basta clicar em Salvar para permitir que minhas fontes sejam carregadas.
Tania Rascia
2
Percebo que funciona algumas vezes e outras vezes eu recebo o erro do navegador depois de editar isso. Não tenho certeza se o seu CloudFlare ou o S3.
19416 Mark
4
Você pode precisar adicionar HEADao AllowedMethods
jordanstephens
31
Não funciona para mim. Ainda não há cabeçalho 'Access-Control-Allow-Origin' na resposta das solicitações HEAD ou GET.
Carpiediem 28/05/19
104

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.

alxrb
fonte
12
Obrigado! Isso fez por mim. Cheguei a clicar em 'adicionar configuração do CORS', mas não percebi que tinha que clicar em 'salvar' porque pensei que estava olhando a configuração padrão. D'oh.
Jack Cushman
35
Eu tinha de conjunto <AllowedHeader>*</AllowedHeader>para que ele funcione (melhor fazer uma nova regra para o seu site apenas quando está fazendo isso)
parlamento
4
O @parl Parliament tinha a mágica lá, pois todas as outras configurações acima não funcionaram até o <AllowedHeader> ser definido como um curinga. Hurrah.
Neal Magee
Eu fui para as configurações do CORS e encontrei as mesmas configurações lá, mas o <AllowedOrigin> * </AllowedOrigin> se tornou ativo quando clicamos no salvamento. Não era antes.
dvdmn
1
Era isso, clique em Salvar
lapinkoira
48

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.

eremzeit
fonte
2
eu estava olhando pela internet há duas semanas, todos os artigos e respostas estavam falando sobre como alterar as configurações do S3 CORS que fiz como eles disseram, mas nenhuma alteração na resposta, até que eu vi sua resposta que fazia sentido para mim, testei-a usando carteiro e seu trabalho! por isso muito obrigado
Abdallah Awwad Alkhwaldah
1
Alguém sabe como posso alterar os cabeçalhos de uma imgtag? Não consigo enviar cabeçalhos diferentes, o navegador envia o pedido
Idan
1
OMG está documentado em algum lugar?
Darkowic 21/03/19
2
É :) docs.aws.amazon.com/AmazonS3/latest/dev/… > Verifique se a solicitação possui o cabeçalho Origin.Se o cabeçalho estiver ausente, o Amazon S3 não tratará a solicitação como uma solicitação de origem cruzada, e não envia cabeçalhos de resposta CORS na resposta.
Darkowic 21/03/19
46

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

Senica Gonzalez
fonte
3
isso funciona a partir de 17 de janeiro de 2018, a resposta aceita é uma vergonha. lol
lasec0203
4
Sim. Isso corrige o erro "Nenhum cabeçalho 'Acesso ao controle de acesso permitir origem'" no Chrome ao obter itens como fontes da AWS S3.
Nostalg.io
1
Sim! Muito obrigado. Permitir HEADmétodo fez o truque.
Zac
37

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.

insira a descrição da imagem aqui

Horacio
fonte
1
ao contrário da resposta aceita, isso realmente funciona! Mesmo CDN ClaudFront carregando este S3 está replicando esses cabeçalhos. Obrigado cara, me salvou algumas horas!
equivalent8
5
Se você estiver usando o CloudFront, também pode querer consultar isso - blog.celingest.com/en/2014/10/02/…
Kunal
1
Graças ao link de @ Kunal. O CloudFront adiciona uma camada de complexidade a essa equação.
Tyler Collier
1
Eu tinha chegado tão longe quanto o MDN documenta <img>, mas coloquei apenas crossOrigin="true"por engano. OBRIGADO!
precisa saber é o seguinte
Uau, isso realmente fez o truque para mim! Eu sou capaz de usá-lo em localhost e eu ainda pode usar o asterisco, a chave foi apenas adicionar crossorigin = "anonymous" para meu elemento html: D
Alexander
23

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:

insira a descrição da imagem aqui

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.

insira a descrição da imagem aqui

MikeiLL
fonte
Quais métodos HTTP permitidos você deve definir?
Learner
Você quer dizer como GET, POST, DELETE, etc ...? Onde estão sendo solicitados?
MikeiLL
Você pode refazer sua pergunta, para que eu possa entender se você está se referindo ao formulário da web cf ou ao aplicativo solicitado pelo recurso s3? Se o primeiro, há uma opção de métodos HTTP mencionada nos documentos aqui docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/…
Aluno
Parece que você estava perguntando o que HTTP Request Methodsdeve ser definido na AWS. E para essa pergunta, não vejo que seja necessário definir um lugar. Se você está falando dentro do aplicativo que está solicitando o recurso, acredito que você apenas solicitaria o arquivo por ele url string: ou seja, uma imagem, vídeo, arquivo de áudio.
MikeiLL
Essa foi a peça que faltava! obrigado! Eu tentei todas as respostas acima deste um e só depois whitelisting esses cabeçalhos ele trabalhou para mim em localhost
Omer Leshem
22

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

Funkodebat
fonte
5
O armazenamento em cache também se mostrou meu problema (depois que eu tentei as respostas aceitas). Obrigado por isso.
FearMediocrity
Também teve o problema de cache no Chrome. Solução fácil: Ferramentas / Configurações> Limpar dados de navegação ...> Imagens e arquivos em cache Embora possa ser necessária outra solução para usuários que possam enfrentar esse problema.
StevieP
1
Obrigado por esta resposta! Eu tive o mesmo problema com o Chrome e não encontrei resposta.
21717 Wandrille
1
Todas as pessoas precisam tentar isso se tiver problemas com o CORS !! Salve meu dia!
Sangar82
11

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>
vigoroso
fonte
3
Precisava definir <AllowedHeader>*</AllowedHeader>assim com um asterisco para o Chrome em outubro de 2017. Muito obrigado! (Além disso, não esqueça de limpar o cache do navegador após a configuração).
Nostalg.io 21/10
Ponto pequeno - acho que você não precisa alterar o AllowedHeader. Eu também estava tendo o mesmo problema aqui, mas acontece que o navegador estava armazenando em cache a resposta anterior ( MaxAgeSeconds). Nas Configurações do DevTools, você pode ignorar o cache enquanto o console está aberto. Uma vez feito isso, ele começou a trabalhar para mim
divillysausages
AllowedHeader> * <definitivamente corrigiu esse problema para mim. Isso só pode ser aplicado quando a solicitação é enviada por uma biblioteca xhr específica? Estou usando o Axios e achei necessário.
Jeremy
6

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

Tonio
fonte
1
Obrigado! Esse problema de cache estava me deixando louco. Para quem quer saber como limpar o cache facilmente no Chrome (versão 73), clique com o botão direito do mouse no botão recarregar e escolha 'Esvaziar o cache e recarregar com força'. Você verá o efeito de todas as alterações feitas no seu S3 CORS em menos de 5 segundos. (Talvez mais rápido - que é apenas quanto tempo leva-me para alternar abas do navegador.)
thund
1
Este foi o meu problema. Meu balde tinha a configuração CORS apropriada, meu navegador estava simplesmente sendo maravilhosamente eficiente hanObrigado.
Daniel Brady
5

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.

Charney Kaye
fonte
4

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.

Deepak Singhal
fonte
Obrigado, a parte da CDN é muito importante. Você poderia adicionar detalhes do que é necessário no nível da CDN?
Svelandiag
3
  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.

Pawel Furmaniak
fonte
2

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?

Pablo García Miranda
fonte
1

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

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
Mich. Gio.
fonte
1

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.

hackel
fonte
1

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>
DIWAKAR
fonte
Vejo muito pouca diferença entre essa configuração e as configurações de muitas outras respostas nesta pergunta. Foi feita alguma tentativa de usar as configurações das respostas anteriores antes de postar essa configuração?
entpnerd
1

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!

Philip Murphy
fonte
1
<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>
Rudolf B
fonte
1

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>
Gaurang Sondagar
fonte
Isso funcionou para eu começar, então eu reforcei a segurança removendo métodos que não eram necessários e especificando-a apenas para os cabeçalhos que eu queria
hitwill
0

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.

TigerBear
fonte
0

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.

Alexander
fonte
0

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", "*");
Christian Saavedra
fonte
-1

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

Yossi Vainshtein
fonte