Angular proxy path rewrite not behaving as expected-CodePudding

I'm trying to build an angular app that reaches a backend server. I've set up an application proxy file so that my angular app could make calls to this backend.

  {
    "/Review/*": {
      "target": "http://localhost:8082",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true,
      "pathRewrite": {"^/Review" : ""}
    },
    "/Submit/*": {
      "target": "http://localhost:8081",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true,
      "pathRewrite": {"^/Submit" : ""}
    }
}

Here is the Path I'm sending out:

http://localhost:4200/Submit/Auth/login

Here is the Expected and Actual Rewrite I'm seeing:

localhost:8081/Auth/login   (expected)
localhost:8081/login        (Actual)

Is there a reason why this is happening and a way to ensure that the pathRewrite handles long, complex endpoints in a predictable manner? Like, just have it remove the submit?

Angular Version:
Angular CLI: 13.1.4
Node: 14.17.3
Package Manager: npm 6.14.13
OS: win32 x64

Note: I did come across This Stack-overflow question But I can't deduce what I'm doing wrong.

things I've tried

Removing the "pathRewrite" field and updating the backend to use the context path (Result: Same thing)
Replacing the port with 8080 (Same thing, just with 8080 instead of 8081)
Replacing Submit with submit (lowercase) (Result: Same thing)
Using a JavaScript file where I implement my own pathRewrite:

"pathRewrite":  function (path, req) {
        let ret = path.replace("/submit/", "/");
        console.log("Rewriting path {} to {}",path, ret);
        return ret;
      }

(Result: Same thing though I'm seeing this in the console Rewriting path {} to {} /submit/Auth/login /Auth/login)

This makes me wonder if maybe the problem isn't the path rewrite but some aspect of the software that uses it that I'm unaware of.

When My browser makes a request to 4200, 4200 responds with a 302 with location of http://localhost:8081/login

CodePudding user response：

I've done a little bit of digging and it turns out that the issue may have been on the Backend side. It kept returning 401.

I fixed the Backend such that it could return 200 at the specified endpoint and now the Angular Proxy is behaving as expected.

CodePudding user response：

To remove the base path try "pathRewrite": {"^/Submit/" : ""} or {"^/Submit/" : "/"}

Under the hood Angular uses webpack dev server, which is utilizing http-proxy-middleware