CODEWITHSUNDEEP
angularangular-cli
MGDavies
MGDavies

Reputation: 1054

Angular Proxy.Conf.Json not working against multiple apis

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.

Upvotes: 4

Views: 7769

Answers (2)

Ritu Raj
Ritu Raj

Reputation: 89

If your context root is same then you can also user like below, however if you have different targets for each endpoints then you can implement as suggested above.

{
  "/**": {

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

    "secure": false,

    "logLevel": "debug"

  }
}

Upvotes: 0

yanky_cranky
yanky_cranky

Reputation: 1363

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)

Upvotes: 12

Related Questions