Cross Origin Request Blocked CORS - solving with angular cli [Dev only]

Question

Lately I encountered following error:

Access to XMLHttpRequest at 'localhost:8080/api/xyz' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Angular is providing an easy solution for this one, but it took me more than enough time to find it. I didn't find anything on straightforward on SO neither in the documentation from Angular.

Obviously, this error has nothing to do with Angular at all. I believe almost every developer encounters this error from time to time and I wanted to share an easy solution so we can keep going on with the important stuff.

First of all my setup: Angular 7, and the use of HttpClient (doc)

I've created a little service:

export class HelloServerService {
  private readonly rootApi: string = 'http://localhost:8080/api/';

  constructor(@Inject(HttpClient) private readonly http: HttpClient) {
  }

  public getHelloWorld(name: string): Observable<string> {
    return this.http.get(this.rootApi + name, {responseType: 'text', params: {}}) as Observable<string>;
  }
}

Answer 1

Remember: This answer is for development purpose only

The key problem, first of all, was that newer browsers are blocking cross-origin request, this involves also differentiating about the port number:

So localhost:4200 is not the same origin as localhost:8080

Using a proxy is probably the easiest way to solve this

Angular CLI has the ability to easily configure a simple proxy which delegates all defined api calls to a destination we prefer.

This article from Richard Russell describes, how we can configure our proxy.

In short:

we create a new file proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

add it to our angular.json

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

and run it through ng serve:

expected output somewhat:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
[HPM] Proxy created: /api  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""