Problemas de Cross-origin em Interfaces de API

Durante o desenvolvimento de endpoints GET e POST, frequentemente surge um problema crítico: a falta de suporte a requisições cross-origin. As principais soluções para este desafio são:

• CORS: uma abordagem moderna e recomendada.
• JSONP: uma técnica mais limitada, pois aceita apenas solicitações GET.

Utilizando o Middleware cors para Lidar com Cross-origin

O pacote cors é um middleware para Express que simplifica a configuração de compartilhamento de recursos cross-origin. O processo de implementação envolve três etapas:

1. Instale o pacote com npm install cors.
2. Importe o módulo usando const cors = require('cors').
3. Aplique o middleware antes das rotas com app.use(cors()).

O que é CORS

CORS (Cross-Origin Resource Sharing) é um conjunto de cabeçalhos HTTP que determinam se o navegador deve permitir ou bloquear o acesso a recursos de um domínio diferente. A política de segurança same-origin do navegador restringe automaticamente tais acessos, mas a configuração adequada de cabeçalhos CORS no servidor pode remover essas restrições.

Pontos Importantes sobre CORS

• A configuração é feita exclusivamente no lado do servidor. Os clientes não requerem ajustes adicionais.
• A compatibilidade do CORS depende do suporte do navegador a XMLHttpRequest Level2 (ex.: IE10+, Chrome4+, Firefox3.5+).

Cabeçalhos de Resposta CORS

Access-Control-Allow-Origin

Este cabeçalho especifica as origens autorizadas a acessar o recurso. Por exemplo:

// Permitir apenas uma origem específica
res.setHeader('Access-Control-Allow-Origin', 'http://exemplo.com');
// Permitir qualquer origem
res.setHeader('Access-Control-Allow-Origin', '*');

Access-Control-Alow-Headers

Por padrão, o CORS aceita apenas nove cabeçalhos na requisição. Para incluir cabeçalhos personalizados, declare-os explicitamente:

res.setHeader('Access-Control-Allow-Headers', 'X-Tipo-Conteudo, X-Token-Acesso');

Access-Control-Allow-Methods

O CORS suporta apenas GET, POST e HEAD por padrão. Para permitir outros métodos:

res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
// Ou usar um curinga
res.setHeader('Access-Control-Allow-Methods', '*');

Classificação de Requisições CORS

Requisições Simples

Atendem a duas condições: método HTTP é GET, POST ou HEAD; os cabeçalhos estão dentro dos limites padrão do CORS.

Requisições com Pré-verificação

Requerem uma solicitação OPTIONS preliminar quando:

• O método HTTP não é GET, POST ou HEAD.
• Incluem cabeçalhos persnoalizados.
• Enviam dados no formato application/json.

Requisições simples enovlvem uma única comunicação, enquanto as com pré-verificação necessitam de duas: a OPTIONS e a requisição real.

Implementação do JSONP

Conceito e Limitações

O JSONP permite obter dados cross-origin usando a tag <script>. O servidor responde com uma chamada de função JavaScript. Suas restrições incluem: não ser uma requisição Ajax verdadeira e suportar apenas GET.

Criando uma Interface JSONP no Express

Para evitar conflitos com CORS, defina rotas JSONP antes de aplicar o middleware cors. Exemplo de implementação:

app.get('/dados/jsonp', (req, res) => {
  // Obter o nome da função de callback da query string
  const nomeCallback = req.query.callback;
  // Dados a serem enviados (podem ser obtidos de uma fonte externa)
  const info = { usuario: 'ana', nivel: 5 };
  // Construir a string de chamada de função
  const scriptResposta = `${nomeCallback}(${JSON.stringify(info)})`;
  // Enviar a resposta
  res.send(scriptResposta);
});

Requisição JSONP com jQuery

Utilize o método $.ajax() do jQuery para realizar chamadas JSONP:

$.ajax({
  url: 'http://localhost:3000/dados/jsonp',
  dataType: 'jsonp',
  success: function(resultado) {
    console.log(resultado);
  }
});