Redirect Angular2 http requests through proxy

Question

I'm creating Angular2 application using angular-cli bootstrapper and use webpack-dev-server for debugging purposes.

For some kinds of http request I want to redirect them to another backend using webpack-dev-server proxy support.

For this reason I've created proxy.conf.json file:

{
  "/api/**": {
    "target": "http://localhost:4201",
    "secure": false
  }
}

And map angular cli to use this config file:

ng serve --proxy-config proxy.conf.json

After starting console message notifies me that proxy created successfully:

NG Live Development Server is running on http://localhost:4200

Proxy created: /api/** -> http://localhost:4201

But all request from http://localhost:4200/api/users always returns with 404 status code. I tried many examples of mapping urls but nothing helps:

"/api/users" -> "http://localhost:4201/users"
"/api/" -> "http://localhost:4201/"

Data from my proxied server are requesting successfully. What I am doing wrong?

you created file called proxy.config.json but you run ng serve with proxy.conf.json. I renamed the file to proxy.conf.json and pointed to google.com instead of localhost:4201 and it works for me. So config is fine. — Iurii Drozdov
– Iurii Drozdov, Commented Jan 5, 2017 at 15:58
Changed to google.com and still no luck. I'm receiving 404 in google also. How to inspect in angular-cli generated project proxy log? Strange about 404 — VadimB
– VadimB, Commented Jan 5, 2017 at 20:12

VadimB · Accepted Answer · 2017-01-05 21:16:03Z

11

I found solution. I've created simple express server to log all requests transferred from proxy server to inspect how mapping works. And I found out that I had wrong understanding about mapping.

Instead of strict mapping defined in config file:

/api/users => http://localhost:4201/users

webpack proxy server map using next rule:

/api/users => http://localhost:4201/users/api/users

So solution here is to add pathRewrite parameter to exclude prefix

{
  "/api/users": {
    "target": "http://localhost:4201",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

answered Jan 5, 2017 at 21:16

VadimB

5,7213 gold badges39 silver badges49 bronze badges

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

3 Comments

Maxime Over a year ago

Thank you for explain us the way you fixed your issue ! You saved my day, I was exactly in the same case! Works perfectly!

Rohitesh Over a year ago

@VadimB hi i am having similar kind of problem after doing these fix also its showing net::ERR_CONNECTION_REFUSED

VadimB Over a year ago

Maybe some issues with target endpoint. Could you share your config?

Collectives™ on Stack Overflow

Redirect Angular2 http requests through proxy

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related