How to make a multiple proxy in angular

Question

So I have two different apis and each one has to be running in the background so in the proxy I have to add both of them.

This is how I currently have it

{
 "/api/*":{
   "target":"https://localhost:44371",
   "secure": false,
   "logLevel" : "debug"
 },
 "/apis/*":{
   "target":"https://localhost:44339",
   "secure": false,
   "logLevel" : "debug"
 }
}

But is redirecting every request to the first proxy. In the url I'm using apis instead of api and still uses the first proxy so all requests end up in the 44371 port and not on 44339 port as it should be.

When I build the api it creates the two proxys

[HPM] Proxy created: /api  ->  https://localhost:44371
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
[HPM] Proxy created: /apis  ->  https://localhost:44339
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

And then the request made

[HPM] GET /apis/administrador/curso -> https://localhost:44371

As you see even if it says apis send it to the wrong api.

How can I succesfully use the two of them?

Answer 1

You can proxy to different hosts.For that you need to proxy.conf.jswhich is in javascript file(instead of proxy.conf.json).

Keep the /apis above /api.

Sample proxy.conf.js

const PROXY_CONFIG = [
  {
      context: [
          "/apis"
      ],
      target: "http://localhost:44339",
      secure: false,
      logLevel : "debug"
  },
  {
    context: [
        "/api"
    ],
    target: "https://localhost:44371",
    secure: false,
    logLevel : "debug"
 }
]

module.exports = PROXY_CONFIG;

References:

https://angular.io/guide/build#proxy-multiple-entries

https://stackoverflow.com/a/62577472/9646878