3

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:

XMLHttpRequest cannot load http://api.musixmatch.com/ws/1.1/album.get?album_id=14250417&apikey=xyz010xyz. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

JS

  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 + '&apikey=' + this.apikey, options)
      .map(res => res.json())
  }

enter image description here

Sumit Ridhal
  • 1,359
  • 3
  • 14
  • 30
  • 1
    The headers need to be set on the backend, not frontend... – AT82 Jul 27 '17 at 10:18
  • @AJT_82 I'm using Spotify API. – Sumit Ridhal Jul 27 '17 at 10:33
  • never used it myself, so cannot really help there... have you tried something like this ? https://stackoverflow.com/a/41879977 – AT82 Jul 27 '17 at 10:40
  • @AJT_82 Rest of API is working fine getting issue with Authenticate API. – Sumit Ridhal Jul 27 '17 at 11:31
  • well in the answer I linked there was how to set the headers... that seems to be the problem here. – AT82 Jul 27 '17 at 11:33
  • @AJT_82 I've tried some similar APIs getting similar `CORS` issues. I've tried `http://api.musicgraph.com/api` Getting: ```Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.``` – Sumit Ridhal Jul 27 '17 at 11:33
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150295/discussion-between-sumit-ridhal-and-ajt-82). – Sumit Ridhal Jul 27 '17 at 11:34

3 Answers3

5

This is the problem with browser, typically its a security concern not to allow other requests which may lead to XSS attack easily. If only for development I suggest you to install a plugin which will disable in your browser plugin

If for production, then you need to configure your API.

Harsha ANS
  • 136
  • 3
1

First, you have to create a file called proxy.conf.json, then put the following code {      "/ restapiserver / *": {          "target": "http: // localhost: 8075",          "secure": false,          "changeOrigin": true      } }

In the service file, in the url of the rest service, delete the domain and leave the root of the service

private url: string = '/ restapiserver /';

PS: In AngularJS 4

Andres Quesada
  • 96
  • 3
-3

Try this if not yet problem solved by setting header in js.

Add "no access control allow origin" plugin/add-on in chrome.

Yo can find here:NoAccessControlAllowOriginAddon

Xavi
  • 1
  • 1