webpack-dev-server: HTTPS-API-Aufrufe über einen Unternehmensproxy leiten

Geben Sie der vorhandenen Proxy-Middleware von webpack-dev-server einen HttpsProxyAgent, ohne Ziel und Pfadumschreibung zu ändern.

Konfigurieren Sie die API-Verbindung auf Node-Seite in webpack.config.mjs mit der aktuellen Proxy-Array-Form:

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

Die Route ist:

browser → webpack dev server → corporate proxy → HTTPS API

target bleibt die echte HTTPS-API. Der Agent, der im Projekt bereits vorhanden sein soll, handelt den Pfad über den HTTP-Vermittler aus.

context wählt die vom Browser gesehenen Anforderungspfade; pathRewrite entfernt das Entwicklungspräfix. Keines von beiden nennt den Unternehmensproxy. Behalten Sie diese Zuordnungen für den von der API erwarteten Pfad bei.

Nutzen Sie die normale Streaming- und Antwortbehandlung der Middleware, damit API-Ablehnung und Transportfehler unterscheidbar bleiben. Ein zweites handgeschriebenes Relay, das immer 200 zurückgibt, würde dieses Ergebnis verbergen.

Browser-Proxy-Einstellungen und der Paket-Download-Proxy von npm konfigurieren andere Verbraucher. Diese Einstellung gehört zum webpack-Prozess, der den externen API-Aufruf macht.

Ähnliche Artikel