Você escreve uma chamada para uma API, tudo parece certo, e o console do navegador mostra uma mensagem vermelha dizendo que a requisição foi bloqueada pela política de CORS. Esse é um dos erros que mais confundem quem está começando a criar sites e apps.
O que é CORS
CORS significa compartilhamento de recursos entre origens diferentes. Uma origem é a combinação de protocolo, domínio e porta. O endereço https://meusite.com.br é uma origem; https://api.outrodominio.com é outra.
Por padrão, o navegador impede que o código de uma página leia respostas vindas de outra origem. Isso protege o usuário: sem essa regra, um site malicioso aberto em outra aba poderia fazer pedidos em nome dele para serviços em que ele está logado e ler as respostas.
Por que o erro aparece
O navegador pergunta ao servidor se aquela origem tem permissão. A resposta vem em cabeçalhos HTTP. Se o servidor não envia o cabeçalho que autoriza a sua origem, o navegador descarta a resposta e mostra o erro.
Dois detalhes ajudam a entender:
- A requisição pode até chegar ao servidor e ser processada. Quem bloqueia a leitura é o navegador.
- Em pedidos com métodos como PUT e DELETE, ou com cabeçalhos personalizados, o navegador envia antes uma consulta de verificação, chamada preflight, usando o método OPTIONS. O servidor precisa responder a ela corretamente.
Como resolver do jeito certo
A correção fica no servidor ou na API que você está chamando. O cabeçalho principal é o Access-Control-Allow-Origin, que indica qual origem tem permissão. Também podem ser necessários o Access-Control-Allow-Methods e o Access-Control-Allow-Headers.
Passos práticos:
- Abra a aba de rede do navegador e confira a resposta da requisição, inclusive a do preflight.
- Veja se os cabeçalhos de CORS estão presentes e se a origem listada é exatamente a do seu site, sem diferença de protocolo ou porta.
- Configure o servidor para permitir apenas os domínios necessários. A maioria dos frameworks tem um recurso ou pacote próprio para isso.
- Se a API for de terceiros e você não controla o servidor, faça a chamada pelo seu próprio back-end e entregue o resultado ao front-end.
O que não fazer
Evite liberar todas as origens em uma API que devolve dados privados só para o erro desaparecer. Evite também depender de extensões que desligam o CORS: elas ajudam no teste local, mas não mudam nada para quem acessa seu site.
Se você está começando a conectar front-end e back-end, vale entender antes o que é API e para que serve. Com essa base, o CORS deixa de ser um mistério e vira só mais um item de configuração.