CODEWITHSUNDEEP
angularwebpack
VadimB
VadimB

Reputation: 5711

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?

Upvotes: 4

Views: 11035

Answers (1)

VadimB
VadimB

Reputation: 5711

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

Upvotes: 11

Related Questions