Spotify API giving CORS error even after adding auth token to get artist's playlist

0
votes

Accessing artist's playlist using Spotify's API requires auth token. I am using the method shown in this link but I am getting following error: "Request header field 0 is not allowed by Access-Control-Allow-Headers in preflight response."

Platform: Ubuntu ; Browser: Google Chrome

Update: My Angular service to retrieve artist's playlist.

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SpotifyService {

  private searchUrl: string;
  private authToken: string= "My auth token here";

  constructor( private _http: Http ) { }

  get( query: string, type= "artist" ){

    let headers = new Headers([
      { 'Authorization': 'Bearer ' + this.authToken },
      { 'Accept': 'application/json' }
    ]); // ... Set content type to JSON
    let options = new RequestOptions({ headers: headers }); // Create a request option
    this.searchUrl = "https://api.spotify.com/v1/search?q=" + query + "&type=artist&market=US";

    return this._http.get( this.searchUrl, options )
          .map( response=> response.json() );
   }

}

Update2: Adding Request and Response Headers:

Request Headers
 Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:en-US,en;q=0.8 Access-Control-Request-Headers:0,1,2 Access-Control-Request-Method:GET Connection:keep-alive DNT:1 Host:api.spotify.com Origin:http://localhost:4200 Referer:http://localhost:4200/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Response Headers
 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:Accept, Authorization, Origin, Content-Type Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, DELETE Access-Control-Allow-Origin:* Access-Control-Max-Age:604800 Connection:keep-alive Content-Length:0 Date:Sun, 06 Aug 2017 03:30:56 GMT Keep-Alive:timeout=600 Server:nginx Strict-Transport-Security:max-age=31536000; X-Content-Type-Options:nosniff

1
angularcorsspotifypreflight
Try to use their SDK if any – Microsmsm
@Microsmsm I do not want to use any SDK or library for my app. Any lead would be helpful. – suraj bora
maybe @mamsoudi can help? – suraj bora

1 Answers

1
votes

The HTTP headers are not being passed to your request.

Angular's Headers constructor expects an object, not an array.

Your code should look like:

let headers = new Headers({
    'Authorization': 'Bearer ' + this.authToken,
    'Accept': 'application/json'
}); // ... Set content type to JSON