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

Posted 2023-02-25

【中文标题】即使在添加身份验证令牌以获取艺术家的播放列表后，Spotify API 也会出现 CORS 错误

【英文标题】：Spotify API giving CORS error even after adding auth token to get artist's playlist

【发布时间】：2018-01-13 09:37:22

【问题描述】：

使用 Spotify 的 API 访问艺术家的播放列表需要身份验证令牌。我正在使用link 中显示的方法，但出现以下错误：“预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 0。”

平台：Ubuntu；浏览器：谷歌浏览器

更新：我的 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：添加请求和响应标头：

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

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

【问题讨论】：

尝试使用他们的 SDK（如果有）

@Microsmsm 我不想为我的应用程序使用任何 SDK 或库。任何线索都会有所帮助。

也许@mamsoudi 可以帮忙？

【参考方案1】：

HTTP 标头未传递给您的请求。

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

您的代码应如下所示：

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