Introdução

Durante o desenvolvimento de aplicações que consomem APIs externas, é comum esbarrar em um problema conhecido por muitos: CORS (Cross-Origin Resource Sharing). Se você trabalha com o Fluig e desenvolve localmente com Angular, provavelmente já viu aquele erro irritante no console:

“Access to XMLHttpRequest at ‘https://fluig.seuservidor.com/api/...' from origin ‘http://localhost:4200’ has been blocked by CORS policy…”

Mas calma, existe uma forma simples e eficiente de contornar esse obstáculo durante o desenvolvimento, sem precisar alterar a configuração do servidor Fluig: configurar um proxy reverso local no Angular.

Entendendo o Problema

O CORS é um mecanismo de segurança dos navegadores que impede que uma aplicação web feita em um domínio (ex: localhost:4200) faça requisições para outro domínio (ex: fluig.seuservidor.com) sem a devida permissão. Isso é ótimo em produção, mas um incômodo durante o desenvolvimento local.

Como não temos (ou não queremos) alterar as configurações do Fluig para liberar origens cruzadas, podemos resolver isso redirecionando as requisições localmente.

A Solução: Usando proxy.conf.json

O Angular CLI permite criar um proxy reverso com apenas um arquivo de configuração. Com isso, ele intercepta suas requisições locais e as redireciona como se estivessem vindo do mesmo domínio do backend. Veja como fazer:

  1. Crie o arquivo proxy.conf.json na raiz do seu projeto Angular com o seguinte conteúdo:
{
  "/api": {
    "target": "https://fluig.seuservidor.com",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}
  • Explicando cada propriedade:
    • "/api": indica o caminho que você quer interceptar. Tudo que começar com /api será redirecionado.
    • "target": o endereço do seu servidor Fluig.
    • "secure": true: informa que o target usa HTTPS. Coloque false se estiver usando um certificado inválido no Fluig.
    • "changeOrigin": true: ajusta o cabeçalho Origin da requisição para coincidir com o do target.
    • "logLevel": "debug": útil para depuração, mostra no terminal o que está sendo redirecionado.
  1. Agora, inicie o servidor Angular com o proxy ativado:
ng serve --proxy-config proxy.conf.json
  1. Pronto! Agora ao fazer chamadas para /api, por exemplo http://localhost:4200/api/public/ecm/dataset, o Angular irá redirecionar para https://fluig.seuservidor.com/api/public/ecm/dataset, sem esbarrar no CORS.

Conclusão

Essa é uma forma prática e rápida de evitar dores de cabeça com CORS durante o desenvolvimento local com Angular e Fluig. Evita alterações inseguras no servidor e mantém o foco no que realmente importa: codar.

Além disso, essa abordagem funciona com qualquer API externa, não só o Fluig — o que a torna uma ferramenta poderosa no seu arsenal de desenvolvimento.