Webpack 代理到代理答案

【问题标题】：Webpack proxying to a proxyWebpack 代理到代理
【发布时间】：2022-01-18 17:44:21
【问题描述】：

我有以下情况：我目前正在使用浏览器扩展程序通过代理服务器 (proxy.company.co.uk:3128) 访问以 company.co.uk 结尾的任何 url 的公司资源，但我现在需要我的 webpack 开发服务器能够也可以访问这些资源。我尝试查看http-proxy-middleware repo，但只发现了一个关于此事的未回答问题和一个toProxy 标志，没有说明如何使用它。

我当前的代理配置非常基本：

devServer: {
  historyApiFallback: true,
  hot: true,
  host: '0.0.0.0',
  port: 3010,
  proxy: {
    '/api': {
      target: 'https://env-01.dev.company.co.uk/v4/',
      pathRewrite: { '^/api': '' },
      changeOrigin: true,
    },
  },
},

有没有人在这样的设置上取得过任何成功，或者对如何实现这种代理到反向代理有想法？

【问题讨论】：

标签： webpack proxy reverse-proxy webpack-dev-server http-proxy

【解决方案1】：

对于以后遇到这种情况的人，方法是设置一个代理，并将其用作 webpack 开发服务器的 http 代理的代理，例如：

const HttpsProxyAgent = require('https-proxy-agent');
*************
devServer: {
  historyApiFallback: true,
  hot: true,
  host: '0.0.0.0',
  port: 3010,
  proxy: {
    '/api': {
      agent: new HttpsProxyAgent('http://proxy.company.co.uk:3128'),
      target: 'https://env-01.dev.company.co.uk/v4/',
      pathRewrite: { '^/api': '' },
      changeOrigin: true,
    },
  },
},

请注意代理协议，根据反向代理的设置方式，您可能需要使用 http，即使您尝试调用的实际端点位于 https 上。

【讨论】：