title: Cross Origin Request Blocked CORS - solving with angular cli [Dev only]
body: <p>Lately I encountered following error:</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at 'localhost:8080/api/xyz' from origin
    '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' has been blocked by CORS policy: Cross origin
    requests are only supported for protocol schemes: http, data, chrome,
    chrome-extension, https.</p>
  </blockquote>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>First of all my setup: 
  Angular 7, and the use of <code>HttpClient</code> (<a href="https://angular.io/api/common/http/HttpClient" rel="nofollow noreferrer">doc</a>)</p>
  
  <p>I've created a little service:</p>
  
  <pre><code>export class HelloServerService {
    private readonly rootApi: string = 'http://localhost:8080/api/';
  
    constructor(@Inject(HttpClient) private readonly http: HttpClient) {
    }
  
    public getHelloWorld(name: string): Observable&lt;string&gt; {
      return this.http.get(this.rootApi + name, {responseType: 'text', params: {}}) as Observable&lt;string&gt;;
    }
  }
  </code></pre>