设置标头时的飞行前问题Angular 2

Question

我正试图通过构建一个简单的spotify应用程序来学习angular 2。

但不知何故，我被困在身份验证过程中。

我的问题是，当我尝试发送标题设置为https://accounts.spotify.com/api/token的超文本传输协议帖子时

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();
          })

我在飞行前收到“对飞行前请求的响应未通过访问控制检查:没有‘访问控制允许来源’……”

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

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

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

所以我现在很困惑，想知道:1。为什么发送不带标题的post会绕过飞行前检查，而发送带标题的post则不会？2.设置和未设置头时，angular http post发送不同类型的请求吗？

非常感谢。

Answer 1

此处 - 文本/纯标头不会触发 CORS 预逃亡。删除内容类型标头将默认为文本/纯文本。

尝试使用浏览器并在不安全模式下启动它 - PowerShell中的一个例子是

<代码>

Answer 2

你必须明白你应该如何从Spotify获得令牌。但是看看你的代码，我可以从Spotify文档的这一行告诉你

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

可能应该是

authHeaders.append（'身份验证'，'承载'密钥加密）；

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