Se você chegou aqui, provavelmente está olhando pro console do navegador e vendo uma mensagem de erro vermelha mencionando "CORS policy" — e sua requisição simplesmente não funciona, mesmo que o código pareça correto. Boa notícia: é um dos erros mais comuns (e mais mal-entendidos) do desenvolvimento web, e na grande maioria dos casos a correção é rápida assim que você entende o que realmente está acontecendo.

O que é CORS, na prática

CORS significa Cross-Origin Resource Sharing — é uma regra de segurança que os navegadores aplicam por padrão. Por segurança, o navegador bloqueia que um site em um endereço (por exemplo, meusite.com) faça requisições pra uma API em outro endereço (por exemplo, api.outroservico.com), a menos que esse outro endereço diga explicitamente que permite.

Navegador bloqueando requisição entre origens diferentes

O ponto mais importante de entender: o erro de CORS não é um bug no seu código do frontend — é o servidor (backend/API) que precisa avisar ao navegador que aceita requisições vindas do seu site. Se você não tiver acesso a esse servidor, a correção precisa ser feita por quem tem.

Passo 1: identifique a mensagem exata de erro

Abra o console do navegador (F12 → aba "Console") e procure por uma linha em vermelho. Geralmente aparece assim:

Access to fetch at 'https://api.exemplo.com/dados' from origin 'https://meusite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Isso significa exatamente o que foi explicado acima: a API em api.exemplo.com não incluiu o cabeçalho que autoriza meusite.com a fazer essa requisição.

Passo 2: descubra se você controla o backend

Antes de aplicar qualquer correção, responda uma pergunta: você tem acesso ao código do backend/API que está respondendo a essa requisição? Essa resposta decide qual dos dois caminhos abaixo seguir.

Passo 3: aplique a correção certa pro seu caso

Se você controla o backend (Node.js / Express)

O jeito mais simples é usar o pacote cors, que resolve isso com poucas linhas:

npm install cors

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://meusite.com'
}));

Isso avisa ao navegador que requisições vindas de meusite.com são permitidas. Se você quiser permitir mais de um domínio (por exemplo, ambiente de teste e produção), pode passar uma lista em vez de um único valor.

Se você usa Firebase (Cloud Functions)

O mesmo pacote cors funciona dentro de uma Cloud Function:

const cors = require('cors')({ origin: true });
const functions = require('firebase-functions');

exports.minhaFuncao = functions.https.onRequest((req, res) => {
  cors(req, res, () => {
    res.json({ mensagem: 'Funcionou!' });
  });
});

Se você usa Cloudflare Workers

Dentro do Worker, basta adicionar os cabeçalhos manualmente na resposta:

export default {
  async fetch(request) {
    const response = await handleRequest(request);
    response.headers.set('Access-Control-Allow-Origin', 'https://meusite.com');
    return response;
  }
}

Se você NÃO controla o backend

Isso acontece bastante quando você está consumindo uma API pública ou de terceiros que não configurou CORS pra aceitar seu domínio. Nesse caso, você não pode "forçar" a API a liberar — as opções são:

Verificar se a própria API tem uma documentação explicando como solicitar liberação de CORS (algumas exigem cadastro de domínio).
Criar um pequeno servidor próprio (proxy) que faz a requisição por trás dos panos e repassa a resposta pro seu frontend — assim, quem fala com a API de terceiros é o seu servidor, não o navegador do usuário, e a regra de CORS deixa de se aplicar.
Usar uma função serverless (Cloudflare Workers, Firebase Functions, Vercel Functions) como esse proxy — não precisa manter um servidor rodando o tempo todo.

Diagrama do navegador passando pelo proxy pra acessar a API de terceiros

⚠️ Cuidado com a solução "rápida" de colocar Access-Control-Allow-Origin: * (liberando qualquer origem) em produção. Isso funciona pra resolver o erro, mas remove a proteção que o CORS existe pra fornecer — qualquer site poderia consumir sua API livremente. Use * só em ambiente de desenvolvimento/teste, e sempre restrinja ao domínio exato em produção.

Passo 4: teste se a correção funcionou

Depois de aplicar a correção e reiniciar o servidor, abra o console do navegador de novo e repita a ação que causava o erro. Se a mensagem vermelha de CORS sumiu e os dados chegaram normalmente, funcionou. Se ainda aparecer erro, confira duas coisas: se o domínio configurado no CORS está escrito exatamente igual ao que aparece na barra de endereço (incluindo http vs https), e se o servidor foi realmente reiniciado depois da mudança.

Navegador se comunicando com sucesso com a API depois da correção de CORS

Erros comuns ao tentar corrigir

Configurar CORS no frontend: não existe "corrigir CORS" mexendo só no código React/Vue/JS do navegador — a configuração sempre precisa estar do lado do servidor que responde a requisição.
Esquecer de reiniciar o servidor: depois de adicionar a configuração de CORS no backend, é preciso reiniciar o processo pra mudança valer.
Confundir com erro de rede: se a API está totalmente fora do ar, o erro é diferente (timeout ou "Failed to fetch" sem menção a CORS) — vale confirmar que a API está realmente respondendo antes de investigar CORS.
Digitar o domínio errado: http://meusite.com e https://meusite.com são origens diferentes pro navegador — com ou sem "www" também conta como diferente.

💡 Se você está testando localmente (localhost) e a API está em produção, lembre que localhost:3000 também precisa estar explicitamente liberado no CORS do backend — geralmente vale a pena manter uma lista separada de origens permitidas pra desenvolvimento e produção.

Publicando seu próprio backend?

Veja nosso guia completo de hospedagem gratuita, do zero ao ar, no Cloudflare Pages.

Ver o guia completo