• Boas-vindas a Azion Docs
• Guias
• Como corrigir erros da política de Cross-Origin Resource Sharing (CORS) na aplicação

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

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, você precisa configurar o browser no Real-Time Manager (RTM) usando o Rules Engine.

No Google Chrome, siga os passos:

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 aplicação do domain A (a.domain) > Rules Engine.
3. Clique no botão Add Rule para criar uma nova regra e selecione Response Phase.
4. Nomeie sua regra.
5. Na seção Criteria, preencha os campos com os seguintes conteúdos: If ${http_origin} is equal http://b-domain.com (sem terminar em /)
6. Na seção Behaviors, selecione o comportamento Add Response Header.
7. Preencha o campo de argumento com 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.
5. 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.