Webpack 代理到代理

Posted 2023-02-22

【中文标题】Webpack 代理到代理

【英文标题】：Webpack proxying to a proxy

【发布时间】：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,
    ,
  ,
,

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

【参考方案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 上。