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 Azion Console 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 a plataforma da Azion e siga os seguintes passos:

  1. Acesse o Console > 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. Selecione Response Phase.
  6. Na seção Criteria, preencha os campos com os seguintes conteúdos: If ${http_origin} is equal http://b-domain.com (sem terminar em /)
  7. Na seção Behaviors, selecione o comportamento Add Response Header.
  8. 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
</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.

Contribuidores