webpack-dev-server : router les appels HTTPS à l'API via un proxy d'entreprise

Ajoutez un HttpsProxyAgent au middleware proxy existant de webpack-dev-server en conservant sa cible et la réécriture de chemin.

Configurez la connexion à l'API côté Node dans webpack.config.mjs avec la forme actuelle de tableau 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': '' },
    }],
  },
};

La route est :

browser → webpack dev server → corporate proxy → HTTPS API

target reste la véritable API HTTPS. L'agent, supposé déjà présent dans le projet, négocie le chemin via l'intermédiaire HTTP.

context sélectionne les chemins de requête vus par le navigateur ; pathRewrite retire le préfixe de développement. Ni l'un ni l'autre ne nomme le proxy d'entreprise. Conservez ces correspondances pour le chemin attendu par l'API.

Utilisez le streaming et le traitement des réponses habituels du middleware afin que le rejet de l'API et l'échec de transport restent distinguables. Un second relais écrit à la main qui renverrait toujours 200 masquerait ce résultat.

Les réglages de proxy du navigateur et le proxy de téléchargement de paquets de npm configurent d'autres consommateurs. Ce réglage appartient au processus webpack qui effectue l'appel externe à l'API.

Articles similaires