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.

yanky_cranky · Accepted Answer · 2019-06-07 16:00:35Z

12

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)

answered Jun 7, 2019 at 16:00

yanky_cranky

1,3631 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charles Robertson Over a year ago

This is a great answer, but how would I add a config for the Twitter api, which is api.twitter.com The problem is that I don’t know what to use for the path part. So far I have done {“api.twitter.com“: {“target”:” api.twitter.com”,”secure”:true,”changeOrigin”:true}} I am afraid SO is removing the https part from the Twitter URL. Please can you imagine that the https protocol is there for both values in the json.

Ritu Raj · Accepted Answer · 2024-10-23 14:28:27Z

0

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"

  }
}

answered Oct 23, 2024 at 14:28

Ritu Raj

898 bronze badges

Collectives™ on Stack Overflow

Angular Proxy.Conf.Json not working against multiple apis

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related