title: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. Angular
body: <p>I'm trying to connect to an API but i'm getting the error.</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://valgresultat.no/api/" rel="nofollow noreferrer">https://valgresultat.no/api/</a>. No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' is therefore not allowed
    access.</p>
  </blockquote>
  
  <p>My proxy.config.json</p>
  
  <pre><code>{
      "/api/": {
         "target":  {
           "host": "valgresultat.no",
           "protocol": "http:",
           "port": 80
         },
         "secure": false,
         "changeOrigin": true,
         "logLevel": "info"
       }
     }
  </code></pre>
  
  <p>My app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app works!';
    private apiUrl = '/api/';
    data: any = {};
  
    constructor(private http: Http) {
      console.log('Hello fellow user');
      this.getContacts();
      this.getData();
    }
    getData() {
      return this.http.get(this.apiUrl).map((res: Response) =&gt; res.json())
    }
  
    getContacts() {
      this.getData().subscribe(data =&gt; {
        console.log(data);
        this.data = data
      })
    }
  }
  </code></pre>