Como funciona o CORS - Entendendo Requisições Cross-Origin

O que é CORS

CORS (Cross-Origin Resource Sharing) é um mecanismo do navegador para compartilhar recursos de forma segura entre origens diferentes. Por razões de segurança, navegadores restringem por padrão requisições para origens diferentes.

O que é Origem: É a combinação de esquema (http/https), host e porta. https://example.com:443 e https://api.example.com:443 são origens diferentes.

Política de Mesma Origem

O navegador restringe requisições para origens diferentes através da Política de Mesma Origem (SOP: Same-Origin Policy).

De https://app.example.com:

✓ https://app.example.com/api  (mesma origem)
✗ https://api.example.com/v1   (host diferente)
✗ http://app.example.com/api   (esquema diferente)
✗ https://app.example.com:8080 (porta diferente)

Fluxo Básico do CORS

Requisição Simples

Requisições que atendem às seguintes condições são enviadas sem preflight.

• Método: GET, HEAD, POST
• Headers: Accept, Accept-Language, Content-Language, Content-Type (apenas alguns)
• Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain

Navegador → Servidor:
GET /api/users
Origin: https://app.example.com

Servidor → Navegador:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.example.com

Requisição Preflight

Requisições que não atendem às condições, como headers customizados ou envio de JSON, requerem verificação prévia.

1. Preflight (verificacao previa)
Navegador → Servidor:
OPTIONS /api/users
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

Servidor → Navegador:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

2. Requisicao real
Navegador → Servidor:
POST /api/users
Origin: https://app.example.com
Content-Type: application/json
Authorization: Bearer token123

Headers CORS

Headers de Resposta

Exemplo de Configuração (Express.js)

const cors = require('cors');

// Permitir origem especifica
app.use(cors({
  origin: 'https://app.example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400
}));

// Permitir multiplas origens
app.use(cors({
  origin: ['https://app.example.com', 'https://admin.example.com'],
}));

// Validar origem dinamicamente
app.use(cors({
  origin: (origin, callback) => {
    const allowedOrigins = ['https://app.example.com'];
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

Modo Credentials

Requisições que incluem Cookies ou informações de autenticação requerem configuração especial.

// Lado do cliente
fetch('https://api.example.com/data', {
  credentials: 'include'  // Incluir Cookies
});

// Lado do servidor
// Access-Control-Allow-Origin: * nao pode ser usado
// E necessario especificar a origem concreta
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true

Erros Comuns e Soluções

Erro 1: No ‘Access-Control-Allow-Origin’ header

Causa: Servidor nao esta retornando headers CORS

Solucao:
- Configurar CORS no lado do servidor
- Fazer requisicao atraves de proxy

Erro 2: Wildcard with credentials

Causa: Combinacao de credentials: 'include' com
       Access-Control-Allow-Origin: *

Solucao:
- Especificar origem concreta
  Access-Control-Allow-Origin: https://app.example.com

Erro 3: Method not allowed

Causa: Metodo nao permitido no preflight

Solucao:
- Adicionar metodo necessario em Access-Control-Allow-Methods

Erro 4: Header not allowed

Causa: Header customizado nao permitido

Solucao:
- Adicionar header em Access-Control-Allow-Headers

Soluções CORS em Desenvolvimento

Usar Proxy

// Exemplo de configuracao Vite
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

Extensões de Navegador

Existem extensões que desabilitam CORS apenas durante o desenvolvimento, mas não as utilize em ambiente de produção.

Considerações de Segurança

Perigo do Wildcard

✗ Perigoso: Permitir todas as origens
Access-Control-Allow-Origin: *

✓ Recomendado: Especificar origens permitidas
Access-Control-Allow-Origin: https://app.example.com

Validação de Origem

// ✗ Exemplo ruim: Retornar Origin da requisicao diretamente
res.setHeader('Access-Control-Allow-Origin', req.headers.origin);

// ✓ Exemplo bom: Validar com whitelist
const allowedOrigins = ['https://app.example.com'];
if (allowedOrigins.includes(req.headers.origin)) {
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
}

Resumo

CORS é um mecanismo importante que permite o compartilhamento de recursos entre origens diferentes, mantendo a segurança da aplicação web. Com a configuração adequada de headers e validação de origem, é possível realizar comunicação cross-origin segura.