createProxyMiddleware: pathRewrite does not work

[j4nos]

trafficstars

Checks

• [X] I understand project setup issues should be asked on StackOverflow or in GitHub Discussions.
• [X] I updated to latest http-proxy-middleware.

Describe the bug (be clear and concise)

I would forward from /api/getUser to /getUser endpoint. Locally it works, but remotelly not, remotelly it sends to /api/getUser, why?

heroku[router]: at=info method=POST path="/api/getUser" host=speechifai-poc.herokuapp.com request_id=f6f155e0-2ab0-4a6e-a0cd-354557d0fcdd fwd="58.97.222.40" dyno=web.1 connect=0ms service=1ms status=404 bytes=588 protocol=https

I can adjust wether targeting local / remote by setting false / true.

if (false) {
  axios.defaults.baseURL = "http://localhost:3000/api/";
} else {
  axios.defaults.baseURL = "https://speechifai-poc.herokuapp.com/api/";
}

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

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: false
        ? "http://localhost:8080"
        : "https://speechifai-poc.herokuapp.com",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/", // rewrite path
      },
    })
  );
};

I have:

"http-proxy-middleware": "^2.0.3",

And I call here with axios:

axios({
  method: "post",
  url: "getUser",
  data: {},
  headers: { crossDomain: true },
}).then((res) => {
  dispatch(setGetUser(res.data));
});

Step-by-step reproduction instructions

I did the configuration and calling axios.

And I call here with axios:

axios({
  method: "post",
  url: "getUser",
  data: {},
  headers: { crossDomain: true },
}).then((res) => {
  dispatch(setGetUser(res.data));
});

Expected behavior (be clear and concise)

Forward on Heroku or /getUser.

How is http-proxy-middleware used in your project?

[1/4] 🤔  Why do we have the module "http-proxy-middleware"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "http-proxy-middleware"
info Reasons this module exists
   - Specified in "dependencies"
   - Hoisted from "react-scripts#webpack-dev-server#http-proxy-middleware"
info Disk size without dependencies: "156KB"
info Disk size with unique dependencies: "576KB"
info Disk size with transitive dependencies: "2.7MB"
info Number of shared dependencies: 9
✨  Done in 0.27s.

What http-proxy-middleware configuration are you using?

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

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: false
        ? "http://localhost:8080"
        : "https://speechifai-poc.herokuapp.com",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/", // rewrite path
      },
    })
  );
};

What OS/version and node/version are you seeing the problem?

Mac 12.0.1

Additional context (optional)

No response

[hroland]

~+1 here~

actually i realized on my end pathRewrite was only utilized/called if the path is already matched flawlessy, not otherwise 😪

[chimurai]

fixed in v3 (beta):

pathRewrite doesn't rewrite basePath anymore. If you don't want the basePath in your target; just leave it out from the target. If you do need "/api" in your target, you'll have to configure: target: "https://speechifai-poc.herokuapp.com/api"

  app.use(
    "/api",
    createProxyMiddleware({
      target: false
        ? "http://localhost:8080"
        : "https://speechifai-poc.herokuapp.com",
      changeOrigin: true,
    })
  );

[paulinavita]

const AUTH_PROXY_OPT = {
  target: 'http://192.168.xxx.xx:9999/',
  changeOrigin: true,
  pathRewrite: {
    '^/v1/auth': '',
    '^/v1/auth/': '',
  },
  proxyTimeout: 10000,
  headers: {
    "Connection": "keep-alive"
  },
  logger: console,
}

router.use('/auth', createProxyMiddleware(AUTH_PROXY_OPT))

Sorry if I'm a bit lost. But I find my code above seems to be not removing the basePath. Actual: /mobile/v1/auth -> /mobile/v1/auth Expected: /mobile/v1/auth -> / Using v2.0.6

And this happens locally. Would like some enlightenment on where I'm doing wrong. Thanks@