webpack-dev-server: HTTPS API-aanroepen via een bedrijfsproxy routeren

Geef de bestaande proxy-middleware van webpack-dev-server een HttpsProxyAgent en behoud het doel en het herschrijven van paden.

Configureer de API-verbinding aan de Node-kant in webpack.config.mjs met de huidige proxy-arrayvorm:

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': '' },
    }],
  },
};

De route is:

browser → webpack dev server → corporate proxy → HTTPS API

target blijft de echte HTTPS-API. De agent, waarvan wordt aangenomen dat die al in het project aanwezig is, onderhandelt het pad via de HTTP-tussenpersoon.

context selecteert de verzoekpaden die de browser ziet; pathRewrite verwijdert het ontwikkelvoorvoegsel. Geen van beide noemt de bedrijfsproxy. Behoud die toewijzingen voor het pad dat de API verwacht.

Gebruik de normale streaming en responsafhandeling van de middleware, zodat API-weigering en transportfout onderscheidbaar blijven. Een tweede handgeschreven relay die altijd 200 teruggeeft, zou dat resultaat verbergen.

Proxyinstellingen van de browser en de pakketdownloadproxy van npm configureren andere gebruikers. Deze instelling hoort bij het webpack-proces dat de externe API-aanroep doet.

Gerelateerde artikelen