Spotify 令牌调用后返回错误网站，而不是错误或令牌

Question

我正在尝试使用授权代码流而不是我目前使用的隐式授权。下面是这两个流的文档。我正在使用我的 Angular 2 应用程序中的 spotify API。前三个步骤进展顺利，我从回调调用中获取代码。但是当我向 https://accounts.spotify.com/api/token 发出帖子调用时，我会收到 CORS 异常，因为调用返回浏览器禁止的网站。返回页面与单击此链接 https://accounts.spotify.com/api/token 相同。我尝试使用 curl 调用此 api，这是我注意到的。 调用此函数时：

curl -H "Authorization: Basic ZjM...zE=" -d grant_type=authorization_code -d code=MQCbtKe...44KN -d redirect_uri=https%3A%2F%2Fwww.foo.com%2Fauth https://accounts.spotify.com/api/token

它返回错误 json 消息并抱怨无效客户端。

当我删除数据时，它会返回该错误 html 页面。

curl -H "Authorization: Basic ZjM...zE=" https://accounts.spotify.com/api/token

所以我假设在我的代码中问题是相同或相似的。那么可以将这些参数设置为 POST 调用体吗？似乎 spotify 端点根本没有获取我的参数，这就是为什么它不返回错误消息的原因。这是spotify提供的示例，这里是Angular http组件的文档。

这是我的 TypeScript 调用：

var data  = {
redirect_uri: this.config.redirectUri,
grant_type: 'authorization_code',
code : code
};
let headers = this.getTokenHeaders();
let address = "https://accounts.spotify.com/api/token";
return this.http.post(address,data, new RequestOptions({headers: headers}))
.toPromise()
.then(res => 
{
let body = res.json();
localStorage.setItem('spotify-access-token', body.access_token);
localStorage.setItem('spotify-refresh-token', body.refresh_token);
var expiresIn = body.expires_in;
return true;
})
.catch(err=> 
{
return false;
});
getTokenHeaders()
{
return new Headers(this.accountAuth());
}
private accountAuth(): Object {
var auth = {
'Authorization': 'Basic ' + (new Buffer(this.config.clientId + ':' + this.config.clientSecret).toString('base64')),
'Content-Type': 'application/x-www-form-urlencoded'
//'Content-Type':'application/json'
};
return auth;
}

我尝试将内容类型设置为application/json和application/x-www-form-urlencoded。

Answer 1

我 https://stackoverflow.com/a/28406268/8081009 找到了这个答案，并从服务器端进行了尝试，当我使用消息正文传递参数时，也在那里得到了相同的错误页面。然后我像这样将参数更改为 url：

var url = "/api/token?redirect_uri=http://localhost:8080/callback.html&grant_type=authorization_code&code="+code;

现在我得到了正确的消息。希望这对某人有所帮助。

因此，不要使用客户端的 api/令牌并将参数设置为 url。