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

Posted 2023-04-15

【中文标题】Angular2 服务 - Spotify API 授权因 cors 政策而失败

【英文标题】：Angular2 Service - Spotify API authorization fails with cors policy

【发布时间】：2017-12-20 07:30:44

【问题描述】：

我目前正在学习一些 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 应用程序的开发角。也许你可以帮忙。在此先感谢

问候克里斯

【问题讨论】：

***.com/questions/33029349/… and ***.com/questions/24914853/… and ***.com/questions/33188989/… and github.com/spotify/web-api-auth-examples 可能相关

好的，我取得了一点进展。您似乎无法通过 get 请求授权，但您必须使用 url 作为组件中的链接。我进入了 Spotify 页面，要求我接受我的帐户和我的应用程序之间的连接。所以我剩下的唯一问题是，在我被重新定向之后。如何在我的组件中访问响应数据？解决这个问题后，我会在这里再次发布完整的代码作为答案

@relief.melone 你能用你的进度更新你的问题吗？

【参考方案1】：

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

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

需要共享方法 - 示例中的选项、获取、发布

【讨论】：

让我感到困惑的是 cors 标头是在服务器上设置的，所以在 spotify 中，api 会阻止它对我来说毫无意义，但在我对回复的评论中我注意到，您必须使用 url 作为链接，并且在接受您的 spotify 帐户和应用程序之间的连接后，您会得到相应的重定向。我仍然缺少的唯一部分是在我被重定向后在哪里找到该令牌

你想做什么？