webpack-dev-server: enruta las llamadas HTTPS a la API a través de un proxy corporativo

Añada un HttpsProxyAgent al middleware de proxy existente de webpack-dev-server conservando su destino y la reescritura de rutas.

Configure la conexión con la API del lado de Node en webpack.config.mjs con la forma actual de matriz 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 ruta es:

browser → webpack dev server → corporate proxy → HTTPS API

target sigue siendo la API HTTPS real. El agente, que se supone ya disponible en el proyecto, negocia la ruta a través del intermediario HTTP.

context selecciona las rutas de solicitud que ve el navegador; pathRewrite elimina el prefijo de desarrollo. Ninguno de los dos nombra el proxy corporativo. Conserve esas asignaciones para la ruta que espera la API.

Use el manejo normal de flujos y respuestas del middleware para que el rechazo de la API y el fallo de transporte sigan siendo distinguibles. Un segundo relé escrito a mano que siempre devuelva 200 ocultaría ese resultado.

La configuración de proxy del navegador y el proxy de descarga de paquetes de npm configuran otros consumidores. Este ajuste pertenece al proceso de webpack que realiza la llamada externa a la API.

Artículos relacionados