Solucione erros da política CORS

Corrija uma requisição que o navegador bloqueia pela política CORS adicionando o header Access-Control-Allow-Origin com uma regra da Response Phase.

Última atualização

Ver como Markdown Configurar agente

Esta página trata de uma requisição entre origens que o navegador bloqueia pela política de Cross-Origin Resource Sharing (CORS), quando a resposta vem de uma aplicação na Azion. Para enviar os headers de CORS antes que o erro apareça, consulte Habilite CORS em uma aplicação.

Uma requisição é bloqueada com No Access-Control-Allow-Origin header is present

Uma página de um domínio requisita um recurso de outro domínio, e o navegador bloqueia a resposta.

O CORS usa headers HTTP para dar a uma página acesso a recursos de um servidor de origem diferente. O navegador bloqueia a resposta porque ela não traz um header Access-Control-Allow-Origin para a origem que fez a requisição.

O exemplo desta seção usa dois domínios:

  • http://a.domain.com/, o domínio que serve o recurso.
  • http://b.domain.com/, o domínio da página que o requisita.

O navegador informa o erro neste formato:

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.

Confirme o erro no navegador

Para encontrar a requisição bloqueada no Google Chrome:

  1. Selecione View > Developer > Developer tools.
  2. Selecione a aba Network.
  3. Selecione a primeira linha, page-cors-subdomain.a.html, e leia a Request URL no painel à direita.
  4. Na página, selecione Test CORS on click. Uma linha vermelha aparece na coluna Name.
  5. Passe o cursor sobre a linha page-cors-subdomain-a.txt e leia a dica.
  6. Selecione page-cors-subdomain-a.txt e leia os detalhes no painel à direita.
  7. Selecione a aba Console e depois Errors. A linha do erro de CORS mostra o domínio de origem e o domínio de destino.

Adicione o header com uma regra

A correção é uma regra da Response Phase na aplicação do domínio A. A regra devolve a origem da requisição no header Access-Control-Allow-Origin quando essa origem é o domínio B. Para o formato do argumento de um header, consulte Rules Engine para Applications.

Para criar a regra no Azion Console:

Abra a aplicação

Acesse Azion Console > Applications e selecione a aplicação do domínio A, a.domain.com.

Selecione a aba Rules Engine
Selecione + Rule
Dê um nome à regra

Na seção General, digite um Name.

Selecione Response Phase

Na seção Phase, selecione Response Phase.

Defina o critério

Na seção Criteria, selecione ${http_origin} como variável e is_equal como operador, e digite http://b.domain.com como argumento. Não adicione a barra final (/).

Adicione o behavior de header

Na seção Behaviors, selecione Add Response Header.

Digite o header

Digite Access-Control-Allow-Origin: ${http_origin} como argumento.

Selecione Save

A regra aparece na aba Rules Engine, em Response.

Verifique a correção

Para testar a regra, sirva dois arquivos a partir do domínio A. A página page-cors-subdomain-a.html requisita o arquivo de texto quando você seleciona o botão dela:

HTML
01<h2>Using the XMLHttpRequest Object</h2>
02
03<div id="demo">
04<button type="button" onclick="loadXMLDoc()">Test CORS on click</button>
05</div>
06
07<script>
08function loadXMLDoc() {
09 var xhttp = new XMLHttpRequest();
10 xhttp.onreadystatechange = function() {
11 if (this.readyState == 4 && this.status == 200) {
12 document.getElementById("demo").innerHTML =
13 this.responseText;
14 }
15 };
16 xhttp.open("GET", "http://a.domain.com/page-cors-subdomain-a.txt", true);
17 xhttp.send();
18}
19</script>

O arquivo page-cors-subdomain-a.txt contém o texto que a página carrega:

Texto
01You clicked!
02I belong to the domain a.
03Domain b shall call me.

Para conferir o resultado no Google Chrome:

  1. Selecione View > Developer > Developer tools.
  2. Selecione a aba Network.
  3. Selecione a primeira linha, page-cors-subdomain.a.html, e leia os detalhes no painel à direita.
  4. Na página, selecione Test CORS on click. A página mostra You clicked! I belong to the domain a. Domain b shall call me.
  5. Selecione a aba Console e depois Errors.

A lista Errors não mostra erro de CORS, e a resposta do domínio A chega à página do domínio B.

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

Recursos relacionados

Habilite CORS em uma aplicação

As regras que enviam headers de CORS para requisições simples, requisições complexas e uma lista de origens permitidas.

Rules Engine para Applications

As fases, variáveis, operadores e behaviors que uma regra pode usar.

Crie regras de request e response

Como adicionar e ordenar regras em cada fase de uma aplicação.

Acesse o Azion Console

Como fazer login no Console em que você cria a regra.