---
name: azion-solucione-erros-da-politica-cors
description: >-
  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.
---

# Solucione erros da política CORS

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](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/primeiros-passos/cross-origin-resource-sharing-cors/).

---

## 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:

```text
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](/pt-br/documentacao/plataforma/applications/rules-engine/#add-request-header).

Para criar a regra no Azion Console:

1. **Abra a aplicação**

   Acesse [Azion Console](https://console.azion.com/) > **Applications** e selecione a aplicação do domínio A, `a.domain.com`.

2. **Selecione a aba Rules Engine**

3. **Selecione + Rule**

4. **Dê um nome à regra**

   Na seção **General**, digite um **Name**.

5. **Selecione Response Phase**

   Na seção **Phase**, selecione **Response Phase**.

6. **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 (`/`).

7. **Adicione o behavior de header**

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

8. **Digite o header**

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

9. **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
<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>
```

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

```text
You clicked!
I belong to the domain a.
Domain 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](https://www.google.com/chrome/) é uma marca registrada de Google LLC nos Estados Unidos e/ou em outros países.

---

## Recursos relacionados

- [Habilite CORS em uma aplicação](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/primeiros-passos/cross-origin-resource-sharing-cors.md): As regras que enviam headers de CORS para requisições simples, requisições complexas e uma lista de origens permitidas.
- [Rules Engine para Applications](/pt-br/documentacao/plataforma/applications/rules-engine.md): As fases, variáveis, operadores e behaviors que uma regra pode usar.
- [Crie regras de request e response](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/primeiros-passos/rules-engine.md): Como adicionar e ordenar regras em cada fase de uma aplicação.
- [Acesse o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console.md): Como fazer login no Console em que você cria a regra.