webpack-dev-server: dirigera HTTPS API-anrop genom en företagsproxy

Ge webpack-dev-servers befintliga proxy-middleware en HttpsProxyAgent och behåll målet och sökvägsomskrivningen.

Konfigurera API-anslutningen på Node-sidan i webpack.config.mjs med den nuvarande proxy-arrayformen:

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

Rutten är:

browser → webpack dev server → corporate proxy → HTTPS API

target förblir det riktiga HTTPS API:et. Agenten, som antas redan finnas i projektet, förhandlar sökvägen genom HTTP-mellanhanden.

context väljer de förfrågningsvägar som webbläsaren ser; pathRewrite tar bort utvecklingsprefixet. Ingen av dem namnger företagsproxyn. Behåll dessa mappningar för den sökväg som API:et förväntar sig.

Använd middlewarens vanliga strömning och svarshantering så att API-avvisning och transportfel förblir åtskiljbara. En andra handskriven relä som alltid returnerar 200 skulle dölja det resultatet.

Webbläsarens proxyinställningar och npms proxy för paketnedladdning konfigurerar andra konsumenter. Den här inställningen tillhör webpack-processen som gör det externa API-anropet.

Relaterade artiklar