Spotify API 即使在添加授权令牌以获取艺术家的播放列表后也会出现 CORS 错误

Question

使用 Spotify API 访问艺术家的播放列表需要授权令牌。我正在使用此中显示的方法，但出现以下错误："Request header field 0 is not allowed by Access-Control-Allow-Headers in preflight response."

平台：Ubuntu；浏览器：Google Chrome

更新：我的 Angular 检索艺术家播放列表的服务。

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() );
   }

}

更新 2：添加请求和响应 Headers：

请求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

响应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

Answer 1

HTTP headers 没有传递给您的请求。

Angular 的 Headers 构造函数需要一个 object，而不是数组。

您的代码应如下所示：

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

Spotify API 即使在添加授权令牌以获取艺术家的播放列表后也会出现 CORS 错误

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

spotify

cors

preflight

angular