1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

doc

Erros na aplicação da política de Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) é um mecanismo que se utiliza de cabeçalhos do protocolo HTTP para dar permissão de acesso a determinados recursos que estão em uma origem diferente do documento em uso. No entanto, uma política de CORS pode bloquear a requisição de um recurso localizado em um domínio a partir de um outro domínio.

Para resolver esse erro, vamos utilizar o seguinte exemplo para guiar o passo a passo:

Domínios:

  • http://a.domain.com/ (origem)
  • http://b.domain.com/ (destino)

Mensagem de erro:

Access to XMLHttpRequest at http://a.domain.com/page-cors-subdomain-a.txt’ from origin ‘http://b.domain.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Para resolver esse tipo de erro, configure o browser e a seção Rules Engine do Real-Time Manager (RTM) seguindo os seguintes passos:

No Google Chrome:

  1. Selecione Ver > Desenvolvedor > Ferramentas para desenvolvedores.
  2. Selecione a aba Network.
  3. Clique na primeira linha page-cors-subdomain.a.html e observe as informações de Request URL apresentadas no painel localizado à direita.
  4. Clique em Test CORS on click e observe a linha vermelha na seção Name.
  5. Posicione o cursor sobre a legenda/linha page-cors-subdomain-a.txt e observe o texto da tooltip.
  6. Selecione page-cors-subdomain-a.txt e observe as informações apresentadas no painel localizado à direita.
  7. Selecione a aba Console > Erros e observe, na linha de erro do CORS, os domínios de origem e de destino.

Vá para o RTM e siga os seguintes passos:

  1. Selecione Products Menu > Edge Application.
  2. Selecione a Edge Application do domain A (a.domain) > Rules Engine.
  3. Clique no botão Add Rule para criar uma nova regra e selecione Response Phase.
  4. Na seção Criteria, preencha os campos com os seguintes conteúdos:
  • ${http_origin}
  • is equal
  • http://b-domain.com” (Note: without / at end)
  1. Na seção Behaviors, preencha os campos com os seguintes conteúdos:
  • Add Response Header
  • Access-Control-Allow-Origin: ${http_origin}

Em seguida, vá para a página HTML e digite o seguinte código:

#1 page-cors-subdomain-a.html
<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Test CORS on click</button>
</div>

<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
  	document.getElementById("demo").innerHTML =
  	this.responseText;
	}
  };
  xhttp.open("GET", "http://a.domain.com/page-cors-subdomain-a.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

#2 page-cors-subdomain-a.txt
You clicked!
I belong to the domain a.
Domain b shall call me.

Por último, para validar que o erro foi corrigido, siga os seguintes passos:

  1. No Google Chrome, selecione Ver > Desenvolvedor > Ferramentas para desenvolvedores.
  2. Selecione a aba Network.
  3. Clique na primeira linha page-cors-subdomain.a.html e observe as informações apresentadas no painel localizado à direita da página.
  4. Clique em Test CORS on click e visualize a mensagem:

“You clicked! I belong to the domain a. Domain b shall call me.”

  1. Selecione a aba Console > Errors e verifique se não há erros apresentados.

Agora, a política de CORS está funcionando corretamente.


Trademarks

Chrome browser é uma marca registrada de Google LLC nos Estados Unidos e/ou outros países.


Não encontrou o que procurava? Abra um ticket.