解決済み：角4.3 HTTPClient基本認証が機能しない

Question

私はAngular 4に基本認証を実装しようとしています。これは、新たに公開されたHttpClientを使用しています。

Tomcatで実行中のSpringアプリケーションに接続しようとしましたが、これは公開されたREST APIです。

私は私のLoginComponent次のコードを持っている：

onSubmit(user){ 
    console.log(user); 
    const body = JSON.stringify({username: user.userName, password: user.password}); 

    let headers = new HttpHeaders(); 
    headers.append("Authorization", "Basic " + btoa("username:password")); 
    headers.append("Content-Type", "application/x-www-form-urlencoded"); 

    this.http.post('my url here',body, {headers: headers}).subscribe(response => { 
     console.log(response); 
    }, err => { 
     console.log("User authentication failed!"); 
    }); 
} 

しかし、要求は全くAuthorizationヘッダーを追加しません。

私が間違って何をやっている：

これはChromeツールNetworkタブからでしょうか？ どうすればこの作品を作れますか？

---

更新1：そのそれでも動作しない：予想通り、私はリクエストのヘッダを取得しています

headers = headers.append("Authorization", "Basic " + btoa("username:password")); 
headers = headers.append("Content-Type", "application/x-www-form-urlencoded"); 

：

以下のように私は私の2行を変更しました。これはChromeからです：

しかし、ポスト・コールがまだ失敗しています。サーバー側で

、私のコードは次のとおりです。

protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { 
    String authCredentials = request.getHeader("Authorization"); 

    if(authCredentials == null) { 
     logger.info("Request with no basic auth credentials {}", request.getRequestURL()); 
     response.setStatus(HttpServletResponse.SC_UNAUTHORIZED); 
     return; 
    } 

    // do my stuff 
} 

コールdo my stuffに達することはありません。 authCredentialsはnullです。

これはchromeからです：

続行する方法は？ HttpHeadersがあるので、私はアップデート1で何をしたかにheaders行を変更しなければならなかった

1）：

---

アップデート2：その作業は：

は、私は両方の手順を実行しなければなりませんでした不変。サーバー側を変更することなく、CORSの問題を解決するためにhereを説明するように

a）はプロキシを使用します。

headers = headers.append("Authorization", "Basic " + btoa("username:password")); 
headers = headers.append("Content-Type", "application/x-www-form-urlencoded"); 

2）今、あなたの条件に基づいて、2つのオプションがあります。

b）サーバーの末尾をhereのように更新し、以下のいくつかの回答で、スプリングの構成を変更してください。

Answer 1

HttpHeadersは不変なので、関数の結果を代入して、呼び出しごとにheadersオブジェクトを上書きする必要があります。あなたはまた、レポサンプルのデモをgithup確認することができますAngular Docs

Answer 2

こんにちは、あなたのバックエンドのCORS設定があなたの角度の要求はそのようにする必要があり

import org.springframework.context.annotation.Bean; 
import org.springframework.context.annotation.Configuration; 
import org.springframework.web.cors.CorsConfiguration; 
import org.springframework.web.cors.UrlBasedCorsConfigurationSource; 
import org.springframework.web.filter.CorsFilter; 

@Configuration 
public class RestConfig { 
    @Bean 
    public CorsFilter corsFilter() { 
     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
     CorsConfiguration config = new CorsConfiguration(); 
     config.setAllowCredentials(true); 
     config.addAllowedOrigin("*"); 
     config.addAllowedHeader("*"); 
     config.addAllowedMethod("OPTIONS"); 
     config.addAllowedMethod("GET"); 
     config.addAllowedMethod("POST"); 
     config.addAllowedMethod("PUT"); 
     config.addAllowedMethod("DELETE"); 
     source.registerCorsConfiguration("/**", config); 
     return new CorsFilter(source); 
    } 
} 

することができ、

import { Http , Headers, Response } from '@angular/http'; 
let headers = new Headers(); 
headers.append("Authorization", "Basic " + btoa("username:password")); 
headers.append("Content-Type", "application/x-www-form-urlencoded"); 

：

let headers = new HttpHeaders(); 
headers = headers.append("Authorization", "Basic " + btoa("username:password")); 
headers = headers.append("Content-Type", "application/x-www-form-urlencoded"); 

ソース spring mvc with angular2/4

Answer 3

RequestOptionsを使用して、投稿リクエストにヘッダーを設定します。パッケージがインポートしましたから

import { Http,Headers,RequestOptions } from '@angular/http'; 
    .. 
    .. 
    let headers = new Headers(); 
    headers.append("Authorization", "Basic " + btoa("username:password")); 
    headers.append("Content-Type", "application/x-www-form-urlencoded"); 

    let options = new RequestOptions({ headers: headers }); 
    this.http.post('my url here',body, options).subscribe(response => { 
      console.log(response); 
     }, err => { 
      console.log("User authentication failed!"); 
     });