how to change proxy target dynamically

[crazyxhz]

Expected behavior

change the proxy target when an api is called

Actual behavior

log info display the new proxy is set up, but in fact it is still proxy to the old proxy target

Setup

• http-proxy-middleware: version
  ^0.17.3
• server: connect/express/browser-sync... + version
  ^4.14.1
• other relevant modules

proxy middleware configuration

var opt = {
        target: 'https://sitea.com/',
        changeOrigin: true,
        secure: false,
        xfwd: true,
        hostRewrite: true,
        cookieDomainRewrite: true,
        headers:'...'
}
app.use(proxyMiddleware('/api', opt));


router.get('/online', function (req, res) {
  opt.target = 'http://siteb.com/';
  app.use(proxyMiddleware('/api', opt));
  console.log(chalk.red(`switching to site b proxy`));
  res.json('ok');
});

[chimurai]

Try the router option: https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/router.md

[crazyxhz]

@chimurai thanks. It works.

[tojoirinah]

I'm using VueJS 2.x, how to change this proxy target dynamically ? Do you have some example to show ?

[daverogers]

function customRouter(req) {
  const { hostname } = req
  const tenant = hostname.split('.')[0]
  return `https://${tenant}.sub.domain.com`
}

module.exports = {
  ...
  devServer: {
   ...
    proxy: {
      '^.*$': {
        target: 'https://tenant.sub.domain.com',
        router: customRouter
      }
    }
  }
}

An example for anybody else using Vue 2.x, I needed a dynamic target to pass-through a subdomain in a multi-tenant application (so when one of our customers runs customername.sub.domain.com then customername would pass through the proxy)

[ihorbond]

hey @daverogers this is exactly what I'm trying to achieve as well but it doesnt seem to work for me. Can you please take a look and see what I could be doing wrong ?

proxy: {
            '/api': {
                target: 'https://tenant.mydomain.work:5001',
                ws: true,
                secure: false,
                changeOrigin: true,
                router: (req) => {
                    const { hostname } = req
                    const tenant = hostname.split('.')[0]
                    console.log(hostname, tenant)
                    return `https://${tenant}.mydomain.work:5001`
                }
            }
        }

This ends up with
Proxy error: Could not proxy request /api/v1/users/reset-pw from tenant1.mydomain.work:8080 to https://tenant.mydomain.work:5001.
Looks like router doesn't rewrite target option in the end :(

It looks like target should be optional when router is used (#512) but it doesn't work with Vue2

[daverogers]

i see you're trying to use port 5001 but you need that assigned outside of proxy:

devServer: {
  port: 5001,
  proxy: {
    ...

[ihorbond]

I do assign it outside I think the issue is that for whatever reason (probably outdated) Vue CLI doesn't allow target to be optional when router option is used and so no matter what I do in router the 'base' remains equal to the value in target. My API runs on mydomain:5001 and vue app on mydomain:8080 (I have 127.0.0.1 pointing to mydomain in hosts) so I was hoping to be able to reroute /api/ request to mydomain:5001

[xlinx]

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  // let fullUrl = '/magic/_startOfTargethttps://_query2.finance.yahoo.com/v10/finance/quoteSummary/_endOfTarget_/'+symbol+'?modules=financialData';
  app.use('/magic',
    createProxyMiddleware({
      target: 'http://localhost',
      router: (req) =>{
        return req.url.match(new RegExp('/_startOfTarget_' + "(.*)" + '/_endOfTarget_'))[1]; // protocol + host
      },
      logLevel: "debug",
      changeOrigin: true,
      pathRewrite: function (path, req) {
        let p=path.match(new RegExp('/_endOfTarget_' + "(.*)" ))[1];
        console.log('[http://DECADE.TW][customRouter][pathRewrite]',p);
        return p;
      },
    })
  );
};

Dynamic target by URL embedded target, ex yahoo finance API

edit: code formatting

[xlinx]

code tag not working on this code....