Webpack proxying to a proxy

Question

I have the following scenario: I am currently using a browser extension to access company resources via a proxy server (proxy.company.co.uk:3128) for any url that ends with company.co.uk, but I now need my webpack dev server to be able to access those resources aswell. I tried looking at the http-proxy-middleware repo, but only found one unaswered question on the matter and a toProxy flag with no explaination on how to use it.

My current proxy config is very basic:

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,
    },
  },
},

Has anyone had any success with such a setup or has ideas on how to achieve this proxying to a reverse proxy?

score 3 · Accepted Answer · answered Dec 18 '21 at 11:34

For anyone running into this situation in the future the approach is to setup a proxy agent and use it as the agent for the webpack dev server's http proxy, such as:

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,
    },
  },
},

Be careful about the proxy protocol, depending on how the reverse proxy is set up you might need to use http even if the actual endpoint you are trying to call is on https.

Webpack proxying to a proxy

1 Answers1