Introdução (3 min)

Imagine um clube exclusivo. Somente membros com carteirinhas válidas podem entrar. CORS, ou Compartilhamento de Recursos de Origem Cruzada, funciona de maneira semelhante na web. Ele é o porteiro que decide se um site (origem A) pode acessar recursos (dados, imagens, etc.) de outro site (origem B).

Em APIs modernas, CORS é absolutamente essencial. Com a proliferação de aplicações web e a crescente necessidade de integração entre serviços, a capacidade de compartilhar recursos entre diferentes origens de forma segura é vital.

Nesta aula, vamos construir um servidor Express simples e configurar o CORS para permitir que um cliente web em uma origem diferente acesse seus recursos. Veremos a configuração básica e abordaremos cenários mais complexos, incluindo o tratamento de erros e melhores práticas para ambientes de produção como o HostGator Plano M.

No ecossistema Node.js/Express, o CORS é tipicamente gerenciado através de middlewares, que interceptam as requisições e adicionam os cabeçalhos HTTP necessários para controlar o acesso aos recursos.

Conceito Fundamental (7 min)

CORS é um mecanismo de segurança implementado pelos navegadores para prevenir que scripts maliciosos em um site acessem dados de outro site sem autorização. Ele define um conjunto de cabeçalhos HTTP que permitem ao servidor especificar quais origens têm permissão para acessar seus recursos.

A origem de uma requisição é definida pela combinação de protocolo (http/https), domínio e porta. Se qualquer um desses elementos for diferente entre o cliente e o servidor, a requisição é considerada de origem cruzada.

Um caso de uso comum é uma aplicação frontend em http://localhost:3000 consumindo uma API em https://api.meusite.com. Sem a configuração correta de CORS, o navegador bloquearia a requisição.

O CORS interage com outras tecnologias de segurança web, como cookies e autenticação. Por exemplo, se você estiver usando cookies para autenticação, precisará configurar o CORS para permitir que o navegador envie os cookies junto com as requisições de origem cruzada.

A principal vantagem do CORS é a segurança aprimorada. A principal desvantagem é a complexidade adicional na configuração do servidor.

Implementação Prática (10 min)

const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 3001; // Porta dinâmica para HostGator

// Configuração do CORS para permitir requisições da origem http://localhost:3000
// Em produção, substitua http://localhost:3000 pela origem do seu frontend
const corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true, // Habilita o envio de cookies
  optionsSuccessStatus: 200 // Alguns navegadores requerem este status
};
app.use(cors(corsOptions)); // Aplica o middleware CORS
app.get('/api/dados', (req, res) => {
  console.log('Requisição recebida para /api/dados'); // Logging profissional
  res.json({ mensagem: 'Dados da API' });
});
app.listen(port, () => {
  console.log(Servidor rodando na porta ${port});
});

Para testar, crie um arquivo index.html em http://localhost:3000 com o seguinte código:

Buscar Dados

Exercício Hands-On (5 min)

Modifique o código para permitir requisições de http://localhost:3002 e http://localhost:3003 além de http://localhost:3000. Utilize um array na propriedade origin do objeto corsOptions.

Solução:

const corsOptions = {
  origin: ['http://localhost:3000', 'http://localhost:3002', 'http://localhost:3003'],
  credentials: true,
  optionsSuccessStatus: 200
};

Teste a solução modificando o código JavaScript no index.html para fazer requisições para o seu servidor a partir das diferentes portas.

Para troubleshooting, verifique o console do navegador para mensagens de erro relacionadas ao CORS. Certifique-se de que as portas estão corretas e que o servidor está rodando.

Próximos passos: Explore opções mais avançadas do middleware cors, como o uso de expressões regulares para definir as origens permitidas e o controle de cabeçalhos específicos.