Fundamentos da Proxyficação no Desenvolvimento

O principle motivo para configurar um proxy em ambientes de desenvolvimento é superar as restrições impostas pela política de mesma origem (Same-Origin Policy). Como o CORS é uma proteção implementada no navegador, as requisições feitas de servidor para servidor não sofrem esse bloqueio. Ao configurar um proxy local, o navegador envia a requisição para o próprio servidor de desenvolvimento (que está na mesma origem), e este repassa a chamada para o servidor de backend real.

Adaptação das Requisições no Frontend

O primeiro passo consiste em remover a referência direta aos servidores externos no código das chamadas de API, utilizando caminhos relativos que o servider local possa interceptar.

Estrutura Anterior:

static obterPerfil(dados) {
  return Requisicao.get({ host: Config.AUTH_SERVICE, rota: 'usuario/perfil', params: dados });
}

static buscarStatus(dados) {
  return Requisicao.get({ host: Config.CORE_SERVICE, rota: 'sistema/status', params: dados });
}

Estrutura Refatorada:

static obterPerfil(dados) {
  // O prefixo /auth-api será interceptado pelo proxy
  return Requisicao.get({ rota: 'auth-api/usuario/perfil', params: dados });
}

static buscarStatus(dados) {
  // O prefixo /gateway será interceptado pelo proxy
  return Requisicao.get({ rota: 'gateway/sistema/status', params: dados });
}

Implementação do Proxy de Encaminhamento

Ao realizar a chamada para localhost:3000/gateway/sistema/status, o servidor de desenvolvimento identifica o prefixo e redireciona a requisição para o destino configurado. É recomendável utilizar prefixos distintos para serviços diferentes, facilitando a organização do roteamento.

Abaixo, apresentamos uma lógica para estruturar essas regras dinamicamente com base no ambiente:

function configurarRedirecionamento() {
  const ambiente = process.env.NODE_ENV || 'dev';
  
  const mapaDeServidores = {
    dev: {
      API_CORE: 'http://dev.interno.empresa.com.br',
      API_AUTH: 'http://dev.interno.empresa.com.br/autenticacao',
    },
    homolog: {
      API_CORE: 'http://hml.interno.empresa.com.br',
      API_AUTH: 'http://hml.interno.empresa.com.br/autenticacao',
    }
  };

  const configuracaoProxy = {
    proxy: {
      // Caso 1: Mantém o prefixo na URL final
      '/auth-api': {
        target: mapaDeServidores[ambiente].API_AUTH,
        changeOrigin: true,
      },
      // Caso 2: Remove o prefixo antes de enviar ao servidor real
      '/gateway': {
        target: mapaDeServidores[ambiente].API_CORE,
        changeOrigin: true,
        pathRewrite: {
          '^/gateway': ''
        },
      },
    }
  };

  return configuracaoProxy;
}

Análise dos Parâmetros de Configuração

• target: Define o endereço de destino para onde a requisição será encaminhada. No primeiro exemplo (/auth-api), uma chamada para /auth-api/login resultaria em http://dev.interno.empresa.com.br/autenticacao/auth-api/login.
• changeOrigin: Quando definido como true, altera a origem do cabeçalho da requisição para o endereço do target. Isso é essencial para evitar que o servidor de backend rejeite a conexão por incompatibilidade de Host.
• pathRewrite: Utilizado quando o prefixo serve apenas para o roteamento local. No exemplo do /gateway, o uso de '^/gateway': '' faz com que o prefixo seja removido. Assim, localhost:3000/gateway/v1/users torna-se http://dev.interno.empresa.com.br/v1/users no destino final.

Integração no Webpack

Para aplicar essas configurações, o resultado da função deve ser injetado na propriedade devServer dentro do arquivo de configuração do seu empacotador (como o webpack.config.js):

const proxySettings = configurarRedirecionamento();

module.exports = {
  // ... outras configurações
  devServer: {
    proxy: proxySettings.proxy,
    port: 3000,
    hot: true
  }
};