oauth /トークン要求のために基本認証ヘッダーが削除されました

Question

私はOauth2認証に深刻な問題があり、私は4夜後にゆっくりと諦めていますので、誰かが私を助けてくれることを願っています。

クライアント： 私は別のフロントエンドプロジェクトとしてAngular2クライアントを持っています。私はoauth/token postがどのように好きなのかを知っています。なぜなら私はすでにPostmanとテストしているからです。問題は、Authorizationヘッダーが削除され、サーバーに届かないということです。 注：Access Controlヘッダーを追加する必要があります。それはすべての違いを、私は...わからない

let headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'); 
headers.append('Accept', 'application/json'); 
headers.append('Access-Control-Allow-Origin', '*'); 
headers.append('Access-Control-Allow-Headers', 'Authorization'); 
headers.append('Authorization', 'Basic ' + Base64.encode('angularApp:theBiggestSecret')); 

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

this.http.post(`${this.baseUrl}oauth/token`, "grant_type=password&scope=read&username=test&password=test&client_id=angularApp&client_secret=theBiggestSecret", headers) 
    .subscribe(
    response => console.log(response) 
); 

}

サーバー： 私はspringSecurityFilterChainがすぐそこ初期化子で登録して春のMVCアプリケーションは、「WebApplicationInitializer」を開始しました。 すべての設定はアノテーションで行いますが、ウェブアプリケーションのコンテンツはまったくありません。埋め込まれた桟橋で始まりました。

AuthorizationServerとResourceServerを同じアプリケーションに設定したので、http：addFilterBeforeを介してSecurityConfigurationにCorsFilterを設定しました。

問題： まあ、私の許可ヘッダーはまだ取り除かれますので、基本認証が実行されないと、私はそのアクセストークンを取得しておりません。しかし、私はCORSが今正常に動作していることを信じて、私はブラウザにCORS関連のエラーを取得していないと私はレスポンスヘッダとしてこれを見ることができます：

HTTP/1.1 401 Unauthorized 
Date: Fri, 23 Sep 2016 21:41:34 GMT 
Access-Control-Allow-Origin: * 
Vary: Origin 
Access-Control-Expose-Headers: Authorization, Content-Type 
Cache-Control: no-store 
Pragma: no-cache 
WWW-Authenticate: Bearer error="unauthorized", error_description="There is no client authentication. Try adding an appropriate authentication filter." 
Content-Type: application/json;charset=UTF-8 
X-Content-Type-Options: nosniff 
X-XSS-Protection: 1; mode=block 
Transfer-Encoding: chunked 
Server: Jetty(9.3.11.v20160721) 

これは、リクエストで送信されるものです：

POST /oauth/token HTTP/1.1 
Host: localhost:8080 
Connection: keep-alive 
Content-Length: 115 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36 
content-type: text/plain 
Accept: */* 
Referer: http://localhost:4200/ 
Accept-Encoding: gzip, deflate 
Accept-Language: cs-CZ,cs;q=0.8,en;q=0.6 

Answer 1

post()メソッドでheadersを正しく設定していません。

あなたはこれを行うことによって、それを修正することができます：

this.http.post(`${this.baseUrl}oauth/token`, '<form data>', { headers: headers }) 
    .subscribe(response => console.log(response)); 

またURLSearchParamsオブジェクトでフォームデータを作成し、角度が自動的にあなたのためのapplication/x-www-form-urlencodedにコンテンツタイプを設定するように体としてそれを設定することができます。

let body = new URLSearchParams(); 
body.set('grant_type', 'password'); 
body.set('scope', 'read'); 
body.set('username', 'test'); 
body.set('password', 'test'); 
body.set('client_id', 'angularApp'); 
body.set('client_secret', 'theBiggestSecret'); 

this.http.post(`${this.baseUrl}oauth/token`, body, { headers: headers }) 
     .subscribe(response => console.log(response));