Question

我目前正在研究Angular2的一些教程。不幸的是，我的教程并未涵盖Spotify API现在需要授权。我已经在Spotify Dev Corner中设置了一个应用程序。我的Angular2-Service代码看起来像这样

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

@Injectable()
export class SpotifyService {
    private searchUrl: string;
    private token: string;
    private client_id = 'xxxx';
    private client_secret = 'yyyy';
    private redirect_uri = 'http://localhost:4200';
    private responseType = 'code';

    constructor(private _http:Http){

    }

    authorize(){
        return this._http
            .get('https://accounts.spotify.com/authorize?client_id=' + this.client_id + '&client_secret=' + this.client_secret + '&redirect_uri=' + this.redirect_uri + '&response_type=' + this.responseType)
            .map(res => res.json());
    }    
}

我的组件中的构造函数看起来像这样

constructor(private _spotifyService:SpotifyService) {
        this._spotifyService.authorize().subscribe(res => {
            console.log(res);
        });
    }

现在我的问题是，当我的应用程序运行时，我收到一个错误的交叉起源策略让我有点困惑，我不确定在哪里正确设置标题。

XMLHttpRequest无法加载 https://accounts.spotify.com/authorize?client_id=xxxx&client_secret=yyyy&redirect_uri=http://localhost:4200&response_type=code。请求中不存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://localhost:4200” 访问。

我已将redirect_uri添加到我们的开发角落的spotify应用中。也许你可以帮忙。提前致谢并

问候克里斯

Answer 1

在HTTP服务器上共享标头，例如nginx，apache。

您需要阅读有关CORS政策的信息。

需要分享方法 - 选项，获取，发布示例

Angular2服务 - Spotify API授权因cors策略失败

1 个答案: