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