Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redirect Angular2 http requests through proxy

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?

like image 615
VadimB Avatar asked Oct 16 '25 02:10

VadimB


1 Answers

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" : ""}
  }
}
like image 192
VadimB Avatar answered Oct 18 '25 21:10

VadimB



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!