webpack-dev-server: encaminhe chamadas HTTPS à API por um proxy corporativo

Adicione um HttpsProxyAgent ao middleware de proxy existente do webpack-dev-server, mantendo o destino e a reescrita de caminho.

Configure a conexão com a API do lado do Node em webpack.config.mjs com a forma atual de matriz de proxy:

import { HttpsProxyAgent } from 'https-proxy-agent';

export default {
  devServer: {
    proxy: [{
      context: ['/api'],
      target: 'https://service.example',
      changeOrigin: true,
      agent: new HttpsProxyAgent('http://proxy.example:8080'),
      pathRewrite: { '^/api': '' },
    }],
  },
};

A rota é:

browser → webpack dev server → corporate proxy → HTTPS API

target continua sendo a API HTTPS real. O agente, que se supõe já disponível no projeto, negocia o caminho através do intermediário HTTP.

context seleciona os caminhos de solicitação vistos pelo navegador; pathRewrite remove o prefixo de desenvolvimento. Nenhum dos dois nomeia o proxy corporativo. Mantenha esses mapeamentos para o caminho esperado pela API.

Use o tratamento normal de streaming e respostas do middleware para que a rejeição da API e a falha de transporte permaneçam distinguíveis. Um segundo relay escrito à mão que sempre retornasse 200 esconderia esse resultado.

As configurações de proxy do navegador e o proxy de download de pacotes do npm configuram outros consumidores. Esta configuração pertence ao processo do webpack que faz a chamada externa à API.

Artigos relacionados