Angular Webpack Proxy Dev Server

Angular CLI provides an easy way to host Angular applications during development by using Webpack dev server. Due to the fact that Webpack dev server is a web server, our frontend gets hosted on a separate web server which causes CORS issues if we want to call endpoints on a backend which we also host locally for development. Today we will see how we can use one of the features of Webpack dev server to setup a proxy during development which will proxy calls from the Angular application to our local backend hence by passing the CORS issue.

• CORS
• Proxy Dev Server

CORS

Let’s consider the following example:

1. We have a backend hosted on http://localhost:5000 returning a json formatted string "kimserey lam",
2. We serve our Angular app using ng serve therefore the dev server is http://localhost:4200.

Now let’s consider the following component where CORS comes into play:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-display-name',
  templateUrl: 'app-display-name.html'
})
export class DisplayNameComponent implements OnInit {
  name: string;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get<string>('http://localhost:5000')
      .subscribe(name => {
        this.name = name;
      });
  }
}

At the start of the component, we make a HTTP GET to our backend to get the name returned from http://localhost:5000. Due to our Angular app served on http://localhost:4200, we have a different origin between backend and frontend, localhost:5000 vs localhost:4200.

CORS (Cross-Origin Resource Sharing) is a safety mechanism that tell browsers to prevent access of resource from servers at different origins.

This isn’t a problem in production as we will be hosting both backend and frontend behind a reverse proxy, like Nginx, which will result in having the same host, and therefore no issues with CORS, but during development it is an issue.

Since we are hosting locally, we can either configure CORS on our backend to accept our frontend origin or, as we will see next, we can take advantage of the proxy feature of Webpack dev server and setup a local proxy for development with ng serve.

Proxy Dev Server

We start first by changing the call in ngOnInit from http://localhost:5000 to /api.

this.http.get<string>('/api')
  .subscribe(name => {
    this.name = name;
  });

This will then execute a HTTP GET on our frontend on http://localhost:4200/api. We then need to proxy /api to our backend which we can configure by creating a proxy.conf.json file:

{
  "/api": {
    "target": "http://localhost:5000",
    "pathRewrite": { "^/api": "" },
    "logLevel": "debug"
  }
}

We start by defining the path to be proxied, then the parameters:

• target defines the proxy target,
• pathRewrite rewrites the path from /api to empty string as the path does not exist on the backend,
• logLevel defines the log level output on Angular CLI console for debugging purposes.

Lastly we need to add the proxy in the serve configuration under options/proxyConfig.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my-first-application:build",
    "proxyConfig": "proxy.conf.json"
  }
}

And we should now be able to call our backend via our frontend local proxy!

Conclusion

Today we saw how to deal with local CORS issues by setting up a proxy on Angular CLI for local development. We started by looking at what CORS was in general and then moved on to configure the Angular CLI to proxy calls to the dev server to our local backend. I hope you liked this post and I’ll see you on the next one!