Angular Proxy.Conf.Json not working against multiple apis

Question

I have the following proxy.conf.json, log lines, and api calls.

  {
  "/first/api/": {
    "target": "/first/api/",
    "secure": false,
    "logLevel": "debug"
  },
  "/second/api/": {
    "target": "/second/api/",
    "secure": false,
    "logLevel": "debug"
  }


[HPM] GET /first/api/values-> /first/api/
[HPM] GET /second/api/dummy -> /second/api/

return this.http.get<any>(this.firstApi + 'values')
return this.http.get<any>(this.secondApi + 'dummy')

Given I can see log lines, I believe the proxy.conf.json is correctly picked up the api calls, but I'm getting a 404 when the call goes out. The logs only output the target, so it's unclear to me how to compose the url I need, for example: localhost/first/api/values

This works correctly when there's only one api:

  {
  "/api/": {
    "target": "/first/",
    "secure": false
  }

Can anybody advise me on further steps to debug?

---

SOLVED

yanky_cranky's answer was correct. As an aide in understanding how his answer related to what I was seeing, I also needed to look at my IIS logs. Here I could see what urls were being called.

Answer 1

Firstly, here you are not correctly leveraging the proxy concept of Angular.

1) About Proxy : Proxy can be used to map any request like '/first/api' to target specific "domain" which is out of your reach. If the apis are not public they will result in cors issue ( which is the property of browser) if the api is pointing to different host : {i.e, either hostname or port or both are different} With Angular,during our development phase we can leverage the same reverse proxy concept what Nginix provides and target to the right domain.

More On Proxy Here

2) your Nginix conf will result in : following paths :

  {
  "/first/api/": {
    "target": "/first/api/",  
    "secure": false,
    "logLevel": "debug"
  },

/first/api/first/api/ , thus you are getting 404

  "/second/api/": {
    "target": "/second/api/",
    "secure": false,
    "logLevel": "debug"
  }

/second/api/second/api/ , same 404

3) Correct Config :

 {
  "/first/api/": {

    "target": "http://localhost:{portNo}",

    "secure": false,

    "logLevel": "debug"

  },
  "/second/api/": {

    "target": "http://localhost:{portNo}",

    "secure": false,

    "logLevel": "debug"

  }

These api will then target to :

http://localhost:{portNo}/first/api

http://localhost:{portNo}/second/api

cheers (y)