Angular Proxy Configuration

Proxy Configuration in Angular. How to configure proxy in Angular app to connect to API running on different port ?

Assuming that you have an API running at http://localhost:3000/getData.

From your Angular here is how you are making the API call,

  callAPIData(){
    this.http.get('/api/getData').subscribe(response => {
      console.log('response is ', response);
    })
  }

You are expecting any HTTP calls starting with /api/ should redirect to http://localhost:3000. Taking an example of the above case, a call to /api/getData will redirect to http://localhost:3000/getData.

In your Angular app at the root level create a file called proxy.conf.json. Add the following JSON to the proxy.conf.json file.

{
    "/api/*": {
      "target": "http://localhost:3000",
      "pathRewrite": {"^/api" : ""}
    }
  }

As per the above JSON proxy configuration, any call starting with /api with be targeted to the http://localhost:3000. The path will be rewritten and /api will get replaced with ``.

So, a call to /api/getData is rewritten to http://localhost:3000/getData.

To make the Angular app use the proxy configuration, you need to specify it while running the Angular app.

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