webpack-dev-server: instradare le chiamate HTTPS all'API tramite un proxy aziendale

Aggiungete un HttpsProxyAgent al middleware proxy esistente di webpack-dev-server mantenendo target e riscrittura del percorso.

Configurate la connessione API lato Node in webpack.config.mjs con l'attuale forma ad array del 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': '' },
    }],
  },
};

Il percorso è:

browser → webpack dev server → corporate proxy → HTTPS API

target resta la vera API HTTPS. L'agente, che si presume già disponibile nel progetto, negozia il percorso tramite l'intermediario HTTP.

context seleziona i percorsi delle richieste visti dal browser; pathRewrite rimuove il prefisso di sviluppo. Nessuno dei due nomina il proxy aziendale. Mantenete quelle mappature per il percorso atteso dall'API.

Usate la normale gestione di streaming e risposte del middleware, così che il rifiuto dell'API e il guasto del trasporto restino distinguibili. Un secondo relay scritto a mano che restituisse sempre 200 nasconderebbe quel risultato.

Le impostazioni proxy del browser e il proxy per il download dei pacchetti di npm configurano altri consumatori. Questa impostazione appartiene al processo webpack che effettua la chiamata API esterna.

Articoli correlati