Como Corrigir Erros CORS em JavaScript: Um Guia Completo

Os erros de CORS (Cross-Origin Resource Sharing) estão entre as frustrações mais comuns que os desenvolvedores enfrentam ao criar aplicações web. Se você já viu a temida mensagem No Access-Control-Allow-Origin header is p

Entendendo CORS

CORS é um recurso de segurança implementado pelos navegadores para impedir que sites maliciosos acessem recursos em domínios diferentes. Quando seu código JavaScript tenta buscar dados de uma origem diferente (d

Solução 1: Configure seu servidor

🎨 AI Generated: Solução 1: Configure Seu Servidor

A solução adequada é configurar seu servidor para incluir cabeçalhos CORS apropriados. Para Express.js:

const cors = require( cors ); app.use(cors());

Ou adicione headers manualmente:

res.setHeader( Access-Control-Allow-Origin , * ); res.setHeader( Access-Control-Allow-Methods , GET, POST, PUT, DELETE );

Solução 2: Use um Proxy

Durante o desenvolvimento, configure um proxy no seu package.json:

proxy : http://localhost:5000

Ou use um servidor proxy de desenvolvimento para contornar as restrições de CORS.

Solução 3: JSONP (Legacy)

🎨 AI Generated: Solução 3: JSONP (Legacy)

Apenas para requests GET, JSONP pode contornar CORS, embora seja amplamente obsoleto e menos seguro.

Solução 4: Browser Extensions (Apenas para Desenvolvimento)

Instale extensões de navegador CORS para testes, mas nunca dependa delas para produção.

Best Practices

🎨 AI Generated: Best Practices

• Especifique origins exatos em vez de usar wildcards (*)
• Permitir apenas métodos HTTP necessários
• Tratar requisições preflight OPTIONS corretamente
• Nunca desativar CORS em produção sem entender as implicações de segurança