# CORS erros desenvolvimento: o que é e como resolver

> CORS (Cross-Origin Resource Sharing) é um mecanismo de segurança do navegador que bloqueia requisições HTTP entre origens diferentes. O erro ocorre quando uma aplicação front-end tenta acessar uma API de domínio, porta ou protocolo distinto, sem os cabeçalhos corretos. A resolução exige configurar o servidor com cabeçalhos como Access-Control-Allow-Origin, além de tratar pré-requisições OPTIONS e credenciais.

*Bombou na Web · Tecnologia · 27 de agosto de 2026 · Kelly Nascimento*

Erro de CORS no desenvolvimento? Entenda o que é, por que o navegador bloqueia e como resolver os casos mais comuns com respostas práticas para APIs e front-ends.

Você está desenvolvendo uma aplicação e, de repente, o console do navegador exibe algo como "blocked by CORS policy". A primeira reação costuma ser de frustração. Afinal, a API responde no Postman, mas o front-end não consegue acessá-la. Talvez você se reconheça aqui. A boa notícia é que CORS não é um bug, é um mecanismo de segurança. E, uma vez que você entende como ele funciona, resolver os erros fica mais simples do que parece.

CORS (Cross-Origin Resource Sharing, ou Compartilhamento de Recursos entre Origens) é uma política do navegador que define quais origens podem acessar recursos de outra origem. Uma origem é composta por protocolo, domínio e porta. Por exemplo, https://meusite.com e https://api.meusite.com são origens diferentes. Quando uma página de uma origem faz uma requisição para outra, o navegador envia uma solicitação e só exibe a resposta se o servidor autorizar explicitamente. Essa autorização é feita por cabeçalhos HTTP.

## Por que o navegador bloqueia requisições entre origens diferentes?

O bloqueio existe para proteger os usuários. Sem ele, qualquer site malicioso poderia fazer requisições para bancos, e-mails e outros serviços em nome da pessoa logada. Imagine que você está logado no seu e-mail e abre um site qualquer. Esse site poderia, em segundo plano, tentar ler suas mensagens. O CORS impede que isso aconteça, obrigando o servidor a declarar quais origens podem acessá-lo.

Vale a pena parar pra pensar: o Postman não bloqueia CORS porque ele não é um navegador. Ele não executa JavaScript nem aplica a política de mesma origem. Por isso, uma API pode funcionar no Postman e falhar no navegador. Não é a API que está com problema, é o navegador que está aplicando uma regra de segurança.

## Quais são os erros de CORS mais comuns no desenvolvimento?

Existem alguns cenários que aparecem com frequência em projetos. O primeiro é a falta do cabeçalho Access-Control-Allow-Origin. O servidor precisa informar qual origem está autorizada. Se ele não enviar esse cabeçalho, o navegador bloqueia a resposta.

O segundo é o erro com requisições preflight. Quando o front-end usa métodos como PUT, DELETE ou envia cabeçalhos personalizados, o navegador envia uma requisição OPTIONS antes da requisição real. Se o servidor não responder corretamente a essa verificação, o erro aparece.

O terceiro é o uso de credenciais, como cookies ou tokens de autenticação. Nesse caso, o cabeçalho Access-Control-Allow-Origin não pode ser * (qualquer origem). Ele precisa especificar a origem exata, além de habilitar Access-Control-Allow-Credentials: true.

Por fim, há o erro quando a origem não está na lista de permitidas. Se o servidor só aceita https://meusite.com e você está rodando em http://localhost:3000, o bloqueio acontece. Esse é um dos erros mais comuns em ambiente de desenvolvimento.

## Como resolver erros de CORS na prática?

A solução depende de onde está o problema. Se você controla o backend, a forma mais direta é configurar os cabeçalhos no servidor. Em uma API Node.js com Express, por exemplo, você pode usar o middleware cors e definir as origens permitidas. Em outras linguagens, como PHP ou Python, existem bibliotecas e configurações equivalentes.

Se você não controla o backend, uma alternativa é usar um proxy de desenvolvimento. Ferramentas como Vite e Webpack Dev Server permitem configurar um proxy que faz a requisição para a API pelo mesmo domínio do front-end. Assim, o navegador entende que a requisição é de mesma origem e não aplica o bloqueio. Essa abordagem funciona bem para desenvolvimento, mas não substitui a configuração correta no servidor para produção.

Um detalhe importante: liberar CORS com * para todas as origens em produção é arriscado. Qualquer site poderá fazer requisições para a sua API. Prefira listar apenas as origens que você controla. Essa é uma ressalva concreta que evita problemas de segurança mais sérios.

## O que é preflight e quando ele é acionado?

Preflight é uma requisição OPTIONS que o navegador envia antes da requisição principal. Ele é acionado quando a requisição não é considerada simples. Isso acontece com métodos que não sejam GET, POST ou HEAD, ou quando há cabeçalhos personalizados, como Authorization ou Content-Type: application/json.

O servidor precisa responder ao preflight com os cabeçalhos Access-Control-Allow-Methods e Access-Control-Allow-Headers, informando quais métodos e cabeçalhos são aceitos. Se essa resposta não vier ou vier incompleta, o navegador bloqueia a requisição real. Uma dica: verifique no console do navegador se o erro menciona "preflight". Isso ajuda a identificar rapidamente o tipo de problema.

## Como testar se a configuração de CORS está correta?

Você pode usar o console do navegador para inspecionar os cabeçalhos da resposta. Na aba Network, clique na requisição bloqueada e veja os headers. Se o Access-Control-Allow-Origin estiver presente e corresponder à origem do seu front-end, o problema pode estar em outro cabeçalho, como Access-Control-Allow-Credentials ou Access-Control-Allow-Headers.

Outra forma é usar ferramentas online de teste de CORS, que fazem uma requisição para a URL e mostram quais cabeçalhos foram retornados. Mas cuidado: essas ferramentas testam de um servidor, não do navegador. Elas ajudam a verificar a configuração do servidor, mas não reproduzem exatamente o comportamento do navegador.

Se você usa o Vite, um contraexemplo comum é esquecer de configurar o proxy e tentar chamar a API diretamente pelo front-end. O proxy resolve o problema em desenvolvimento, mas em produção você precisará da configuração no servidor ou em um gateway de API.

## Resumo e próximo passo prático

CORS é uma política de segurança do navegador, não um erro do seu código. Para resolver, identifique se o problema está no servidor (falta de cabeçalhos), no front-end (origem não permitida) ou no preflight. Comece verificando os headers na aba Network e ajuste a configuração no backend ou use um proxy no desenvolvimento.

## Perguntas frequentes sobre CORS

### CORS é um problema de segurança?

CORS não é um problema, é um mecanismo de segurança. Ele impede que sites maliciosos acessem recursos de outros domínios sem permissão. Configurá-lo corretamente é parte do trabalho de quem desenvolve APIs e front-ends.

### Como resolver CORS no React?

No React, a solução mais comum em desenvolvimento é configurar um proxy no Vite ou no Webpack Dev Server. Em produção, o backend precisa enviar os cabeçalhos corretos, como Access-Control-Allow-Origin com a origem do seu front-end.

### O que significa "blocked by CORS policy"?

Significa que o navegador bloqueou a resposta de uma requisição entre origens diferentes porque o servidor não autorizou a origem do seu site. A autorização é feita por cabeçalhos HTTP que o servidor precisa enviar.

### Preciso configurar CORS em todas as APIs?

Sim, se a API for acessada por um front-end em outra origem. Se a API for consumida apenas por servidores, como em integrações backend para backend, o CORS não se aplica, pois a política é do navegador.

### Como liberar CORS para todas as origens?

Você pode usar Access-Control-Allow-Origin: *. Mas isso libera o acesso para qualquer site, o que é arriscado em produção. Prefira listar apenas as origens que você controla, especialmente se usar credenciais.

### CORS afeta apenas JavaScript?

Sim, o CORS é aplicado pelo navegador a requisições feitas com JavaScript, como fetch ou XMLHttpRequest. Tags como e têm regras diferentes e não são bloqueadas da mesma forma.

---

Fonte (canonical): https://www.bombounaweb.com.br/tecnologia/cors-erros-desenvolvimento-o-que-e-e-como-resolver/