Proxy.conf.json not working as expected for Angular CLI

Question

I am trying to resolve CORS Policy issue with Access-Control-Allow-Origin header using Proxy.conf.json with my Angular application. I don't have much experience with Angular and after trying so many google searches I did below configuration with my application and it's not working for me.

It seems like Angular is not going to proxy, api calls works as if there is nothing specify in proxy.

I am using Node to host my application and I have following command to start my application in package.json

"ng": "ng",
 "start": "ng serve --host 0.0.0.0 -p 8080 --proxy-config proxy.conf.json",

my environment.ts file has below reference.

"proxyService":"http://machinename:7171/esbapi/servicedetails/v1/proxyservice"

I am calling above api using post

return this.http.post(environment.proxyService, jsonForPost).map((res: Response) => res.json());

I have following code in my proxy.conf.json. I have also tried with "/esbapi/* but I am still not getting it to work.

{
  "/esbapi/servicedetails/v1/proxyservice*" :{
     "target":"http://machinename:7171/esbapi/servicedetails/v1/proxyservice",
     "secure": false,
     "changeOrigin" : true,
     "logLevel": "debug"
    }
}

I am still getting CORS issue when I use the above config. Proxy seems to be not working.

I have also tried below steps.

In one post it was mentioned that having fixed URL path may not work with post method so I also tried changing value in my

environment.ts

"proxyService":"/esbapi/servicedetails/v1/proxyservice"

and tried to create proxy for that which did not work as well.

Instead of calling

"target":"http://machinename:7171/esbapi/servicedetails/v1/proxyservice",

it was calling

http://localhost:8080/esbapi/servicedetails/v1/proxyservice

The code did not pick up the target provided in proxy conf file.

Please let me know if I am doing something wrong here.

Some More details -------

When I start the server I can see following information in console.

> ng serve --host 0.0.0.0 -p 8080 --proxy-config proxy.conf.json

** NG Live Development Server is listening on 0.0.0.0:8080, open your browser on http://localhost:8080/ **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /esbapi/servicedetails/v1/proxyservice*  ->  http://machinename:7171
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

And when I make a call from UI below line is printed on Console

[HPM] POST /esbapi/servicedetails/v1/proxyservice -> http://machinename:7171/esbapi/servicedetails/v1/proxyservice

I turned on browser console and I can see following message

POST http://localhost:8080/esbapi/servicedetails/v1/proxyservice net::ERR_EMPTY_RESPONSE

Is CORS enabled on the server you are trying to make HTTP calls to? — Alexander Staroselsky
– Alexander Staroselsky, Commented Mar 27, 2019 at 14:22

zmag · Accepted Answer · 2019-03-27 14:40:02Z

2

it was calling

http://localhost:8080/esbapi/servicedetails/v1/proxyservice

URI is fine.

Edit you proxy.conf.json like below:

{
  "/esbapi/servicedetails/v1/proxyservice" :{
     "target":"http://machinename:7171",
     "secure": false,
     "changeOrigin" : true,
     "logLevel": "debug"
    }
}

answered Mar 27, 2019 at 14:40

zmag

8,27112 gold badges39 silver badges47 bronze badges

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

4 Comments

Nakul Detroja Over a year ago

tried that as well, along with few other combination including pathRewrite but still not able to progress. I provided some more details above hopefully that will help to understand issue better

zmag Over a year ago

Have you removed changeOrigin property? And URI property key has * in proxy.conf.json in your post. Is that a typo?

Nakul Detroja Over a year ago

I do have "changeOrigin" : true, and * was just there not a typo. I tried removing the * but same behavior

Nakul Detroja Over a year ago

I am also Monitoring api at machinename:7171 and no request is being received at that endpoint.

Collectives™ on Stack Overflow

Proxy.conf.json not working as expected for Angular CLI

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related