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
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 VadimB · Accepted Answer · 2017-01-05T21:16:03

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" : ""}
  }
}

Redirect Angular2 http requests through proxy

1 Answers