Webpack dev server proxy router option doesn't work

Question

I'm setting up an application using the Vue CLI. I've come to configuring the proxy of the webpack-dev-server to proxy requests to a certain endpoint. Which endpoint to proxy to differs based on certain request parameters.

According to the http-proxy documentation, I should be able to do this using the router option (instead of the target property, but the target property is required by webpack-dev-server). Here's a minimal version of my proxy configuration:

{
  devServer: {
    port: 8080,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        router: function (req) {
          console.log('Proxy router', req.hostname);
          return 'http://localhost:7000';
        },
      },
    },
  }
}

What I'd expect to happen here is that any requests made to http://localhost:8080/api would be proxied to http://localhost:7000. What actually happens is that it tries to proxy the requests to the endpoint configured in the target option.

To illustrate this, this is the console output:

Proxy router localhost

Proxy error: Could not proxy request /api/test from localhost:8080 to http://localhost:8000/.

See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

It executes the router function (as seen by the console log output above), but it seems to just ignore the result and proxy to the target endpoint anyway. According to the http-proxy docs, the target option isn't required when using the router option, so I would have removed it if I could, but webpack-dev-server itself requires the target option to be set and be a valid URI.

How can I get the proxy to use the router function in webpack-dev-server?

Answer 1

This appears to be a problem with the underlying http-proxy-middleware. Although that configuration does successfully proxy the request to /api to http://localhost:7000, if the proxied request fails the original target is logged:

const target = (this.proxyOptions.target as any).host || this.proxyOptions.target;
const errorMessage =
  '[HPM] Error occurred while trying to proxy request %s from %s to %s (%s) (%s)';

Source

If you turn up the log level, you can see that it is using the desired target:

'/api': {
  target: 'http://localhost:8000',
  router: function () {
    return 'http://localhost:7000';
  },
  logLevel: 'debug',
},

[HPM] Router new target: http://localhost:8000 -> "http://localhost:7000"
[HPM] GET /api => http://localhost:7000
[HPM] Error occurred while trying to proxy request /api from localhost:8080 to http://localhost:8000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

It looks like this was fixed in v1.1.2.