Question

我正在尝试通过构建一个简单的spotify app来学习角度2。

但不知何故，我陷入了身份验证过程中。

我的问题是，当我尝试发送标题设置为https://accounts.spotify.com/api/token

的http帖子时

let tokenUrl = 'https://accounts.spotify.com/api/token';

    let keyEncrypted = btoa( this.client_id + ':' + this.client_secret);

    let authHeaders = new Headers();
    authHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
    authHeaders.append('Authentication', 'Basic ' + keyEncrypted);

    let options = new RequestOptions({headers: authHeaders});

    let body = 'code=' + authCode + '&grant_type=authorization_code' + '&redirect_uri=' + this.redirect_uri;

    let jsonString = JSON.stringify({
      code: authCode,
      grant_type: 'authorization_code',
      redirect_uri: this.redirect_uri
    })


    return this._http
        .post(
          tokenUrl, 
          jsonString,
          options
          ).map( res => {
            res.json();
          })

我得到一个飞行前＆＃34; 对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39; ... ＆＃34;

但是当我从返回中删除标题时

return this._http
        .post(
          tokenUrl, 
          jsonString // Header removed
          ).map( res => {
            res.json();
          })

飞行前检查似乎已被绕过，但后来我得到了媒体类型不允许错误。

所以我现在很困惑，想知道： 1.为什么发送没有邮件标题的邮件会绕过飞行前检查并且发送邮件不带标题？ 2.当设置标头并且没有设置时，angular http post会发送不同类型的请求吗？

非常感谢。

Answer 1

您必须准确了解如何从Spotify获取令牌。但是看看你的代码，我可以通过查看Spotify documentation这一行来告诉你

authHeaders.append('Authentication', 'Basic ' + keyEncrypted);

应该是

authHeaders.append('Authentication', 'Bearer ' + keyEncrypted);

首先，尝试使用像Postman或Curl这样的程序从Spotify API获取令牌，使用令牌发出请求，然后一旦从API接收数据，您就清楚地了解如何流应该工作，然后尝试使用Angular2应用程序。

Answer 2

Here - text / plain标头不会触发CORS pre-flight。删除content-type标头将默认为text / plain。

尝试使用Chrome并以不安全模式启动它 - PowerShell中的一个示例是

& "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\{yourusername}\AppData\Local\Google\Chrome\User Data\Default"

设置标题时的预飞行问题Angular 2

2 个答案: