chrome · JavaScript
A mensagem
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
O que significa
A requisição chegou ao servidor e uma resposta voltou, mas essa resposta não trazia cabeçalho permitindo esta origem, então o navegador recusou entregá-la ao seu JavaScript. Só navegadores aplicam essa regra, e é por isso que a mesma URL funciona no curl — parece que o servidor está bem e só o navegador está quebrado. A correção mora sempre no servidor: acrescente Access-Control-Allow-Origin: http://localhost:3000 à resposta. O front-end não pode fazer nada e, se o servidor não é seu, passar a chamada pelo seu próprio é o único caminho. Allow-Origin: * não vale para requisições que enviam cookies; essas exigem a origem exata mais Allow-Credentials.
A correção
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- Impresso por
- chrome
- JavaScript
- 15
Erros de navegador e de Node costumam dizer o que quebrou e não por que o valor ficou assim — você leu undefined, não era uma função, não era JSON — então o lugar de corrigir está acima da linha que estourou, e calar só aquela linha com ?. e valores padrão faz o mesmo problema reaparecer mais longe, numa forma mais difícil de reconhecer.
Como ler uma mensagem de erro
- Leia da primeira linha para baixo. Quanto mais abaixo, mais são as tripas da ferramenta; a causa costuma estar no topo.
- Se há arquivo e número de linha, comece ali — não o quadro superior da pilha, e sim a linha mais alta que nomeie um arquivo seu.
- Pesquise a mensagem literal, mas tire primeiro seus caminhos e nomes de variáveis: é isso que impede a busca de casar.
- A mesma condição é redigida de formas diferentes conforme a versão. Se os resultados não batem, some o número da versão.
- Antes de colar uma correção, veja o que ela descarta. Algumas não dá para desfazer.
Perguntas frequentes
Q. O que significa “Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”?
A requisição chegou ao servidor e uma resposta voltou, mas essa resposta não trazia cabeçalho permitindo esta origem, então o navegador recusou entregá-la ao seu JavaScript. Só navegadores aplicam essa regra, e é por isso que a mesma URL funciona no curl — parece que o servidor está bem e só o navegador está quebrado. A correção mora sempre no servidor: acrescente Access-Control-Allow-Origin: http://localhost:3000 à resposta. O front-end não pode fazer nada e, se o servidor não é seu, passar a chamada pelo seu próprio é o único caminho. Allow-Origin: * não vale para requisições que enviam cookies; essas exigem a origem exata mais Allow-Credentials.
Q. Como corrigir?
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — antes de rodar, veja acima o que este comando descarta.
Q. Qual ferramenta imprime isso?
chrome. Fica em JavaScript e a mensagem tem 23 palavras.