Pre Flight Issueヘッダーが設定されているときに角度2を設定します

Question

私は単純なスポットアプリケーションを構築することで角度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(); 
      }) 

私は、アクセス制御チェックを通過しないプリフライトリクエストのプリフライト "レスポンスを得るに設定ヘッダでのHTTP POSTを送信しようとすると：いいえ"アクセス制御 - 許可 - 起源... "

しかし、私は次のようにリターンからヘッダを削除すると

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

飛行前のチェックはバイパスされたようですが、メディアタイプにエラーが発生しません。

1.ポストw/oヘッダーの送信は、飛行前チェックをバイパスし、ポストw /ヘッダーを送信するのはなぜですか？ 2.ヘッダーが設定されていて設定されていない場合、角度http postは異なるタイプの要求を送信しますか？

多くのありがとうございます。

Answer 1

Spotifyからトークンを取得する方法を正確に理解しておく必要があります。しかし、あなたのコードを見て、私はおそらく

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

まずする必要があり、プログラムを使用して楽しんでるのAPIからトークンを試してみて、入手

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

このラインSpotify documentationを見てからあなたを伝えることができますPostmanやCurlのようにトークンでリクエストを行い、APIからデータを受け取ったらフローの仕組みをはっきりと理解してから、Angular2アプリケーションを試してみてください。

Answer 2

Here - テキスト/プレーンヘッダーはCORSプリフライトを開始しません。 content-typeヘッダーを削除すると、デフォルトでtext/plainになります。あなたの角度のアプリにアクセスするには、// localhostを：PowerShellの例では、HTTPを使用している

& "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"