Webpack 代理到代理

Question

我有以下场景：对于任何以 company.co.uk 结尾的 url，我目前正在使用浏览器扩展通过代理服务器 (proxy.company.co.uk:3128) 访问公司资源，但我现在需要我的 webpack 开发服务器也能够访问这些资源。我试着查看 http-proxy-middleware 存储库，但只发现一个关于此事的未回答问题和一个 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,
    },
  },
},

有没有人成功地进行了这样的设置，或者对如何实现这种代理到反向代理有想法？

Answer 1

任何人运行以后遇到这种情况的方法是设置一个代理代理并将其用作webpack dev服务器的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,
    },
  },
},

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

Webpack 代理到代理

Webpack proxying to a proxy

proxy

reverse-proxy

http-proxy

webpack

webpack-dev-server