Question

所以我一直在学习Angular，我刚刚完成了我的第一个端到端应用程序。该应用程序利用Spotify的公共API搜索音乐并播放曲目预览。

我在编写Http Post方法时遇到问题。这个post方法返回.json，其中包含一个访问令牌，用于访问和调用API。我的Post方法在Postman中运行得很好，但我无法弄清楚如何在Angular中编写它。

这就是我在邮差中所拥有的：

POST /api/token HTTP/1.1
Host: accounts.spotify.com
Content-Type: application/x-www-form-urlencoded
Authorization: Basic Y2M5ZjgzZWM1NGRkNDVlYTg1NGEzZDdhNmRmOGU2ZjY6YjNhY2FkMDc4YjkxNDNlZTkwNzgxMzBlNGJiNDVjZTI=
Cache-Control: no-cache
Postman-Token: 8e3e0924-1ad7-97b4-3aee-533486854434

grant_type=client_credentials

该帖子完美无缺，并返回我需要的access_token。

这就是我在Angular中所拥有的：

    constructor(private _http:Http) {
    this.clientSecret = "Y2M5ZjgzZWM1NGRkNDVlYTg1NGEzZDdhNmRmOGU2ZjY6YjNhY2FkMDc4YjkxNDNlZTkwNzgxMzBlNGJiNDVjZTI=";
    this.authURL = "https://accounts.spotify.com/api/token";
    let header = new Headers();
    header.append("Content-Type", "application/x-www-form-urlencoded");
    header.append("Authorization", "Basic " + this.clientSecret);
    this._http.post(this.authURL, "grant_type=client_credentials", {headers: header})
    .map(res => res.json())
    .subscribe(res => {this.authToken = res.access_token})
  }

我收到此错误：

Failed to load https://accounts.spotify.com/api/token: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. 
Origin 'http://localhost:4200' is therefore not allowed access.

显然听起来我错过了一个标题，但我认为这是我发布正文的方式：“grant_type = client_credentials”。此外，它与类型的事实有关：application / x-www-form-urlencoded

非常感谢任何帮助，谢谢！

P.S。这是我的第一篇文章，我希望一切都格式化好。

Answer 1

与Content-Type没有任何关系。问题的关键是您必须指定Spotify APP的重定向URI 。之后，URL {{1在这种情况下，将允许访问Spotify的API端点。请参阅Spotify Developer Doc

中的详细信息

Angular 5 - HTTP Post x-www-form-urlencoded

1 个答案: