Angular proxy path rewrite not behaving as expected

Question

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

1. Removing the "pathRewrite" field and updating the backend to use the context path (Result: Same thing)
2. Replacing the port with 8080 (Same thing, just with 8080 instead of 8081)
3. Replacing Submit with submit (lowercase) (Result: Same thing)
4. 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

Answer 1

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.