title: Angular 4 - No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I'm trying to get some data with Spotify / Musixmatch API in my Angular 4 app but it is not working. I keep getting this error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load
    <a href="http://api.musixmatch.com/ws/1.1/album.get?album_id=14250417&amp;apikey=xyz010xyz" rel="nofollow noreferrer">http://api.musixmatch.com/ws/1.1/album.get?album_id=14250417&amp;apikey=xyz010xyz</a>.
    Response to preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:9000" rel="nofollow noreferrer">http://localhost:9000</a>' is therefore not allowed
    access.</p>
  </blockquote>
  
  <p><strong>JS</strong></p>
  
  <pre><code>  let headers = new Headers();
      headers.append('Content-Type','application/json');
      headers.append('Accept', 'application/json');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT');
      headers.append('Access-Control-Allow-Origin', '*');
      headers.append('Access-Control-Allow-Headers', "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding");
      let options = new RequestOptions({ headers: headers });
      console.log(options)
      return this.http.get(this.url + 'album.get?album_id=' + album_id + '&amp;apikey=' + this.apikey, options)
        .map(res =&gt; res.json())
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/60AKh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60AKh.png" alt="enter image description here"></a></p>