フォームのurlencodeをAngular 5に投稿する

Question

私は、SpringバックエンドとAngular 5フロントエンドを使用してアプリケーションを開発しようとしています。ログインのために私はSpring Securityを使用しており、フロントエンドではログインデータをx-www-form-urlencodedとして送信しようとしています。しかし、バックエンドはユーザー名とパスワードの両方にnullを受け取ります。 HttpClientのAngular 5ドキュメンテーションは、jsonデータを投稿するための例のみを提供し、Httpは推奨されなくなりました。

この問題を解決する方法については、何かアドバイスをいただければ幸いです。

constructor(public httpClient: HttpClient) { 
    console.log('Hello RestService Provider'); 
} 

login(username: string, password: string) { 
    var body = 'username=' + username + '&password=' + password + "&remember-me=" + false; 
    var headers = new HttpHeaders(); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8'); 
    let options = {headers: headers, withCredentials: true}; 
    this.callPostWithOptions("login", body, options).then(data=>{ 
     this.getCurrentUser(); 
    }); 
} 

callPostWithOptions(address, body, options) { 
    return new Promise(resolve => { 
     address = this._SERVER_HOST + ":" + this._SERVER_PORT + "/" + address; 
     this.httpClient.post(address, body, options) 
     .subscribe((data) => { 
      resolve(data); 
      }, 
      (err) => { 
      console.log("error during POST", err) 
      }); 
    }); 
} 

とサーバーのエンドポイント：

@RequestMapping(value = "/login", method = RequestMethod.GET) 
@CrossOrigin(origins = "*") 
public ModelAndView handle() { 
    return new ModelAndView("/app/userOverview"); 
} 

編集：ここ

は私の角度コードがある私は、私はポストマンでそれをテストするとき、それは問題なく動作しますが、言及するのを忘れてしまった

Answer 1

新しいHTTPClientモジュールは、不変型でのみ動作します。つまり、ヘッダーとパラメーターは変更できません。 append()操作では、実際にオリジナルのコピーが返され、ヘッダーが追加されます。

let headers = new HttpHeaders(); 
headers.append('...','...');// <- doesn't change the original object, but creates a new one! 

かわりに、返されたオブジェクトキャプチャする：追記として

let headers = new HttpHeaders(); 
headers = headers.append('...','...'); 

を、私はtoPromise() operatorを使用するようにcallPostWithOptionsを変更します

callPostWithOptions(address, body, options) { 
    address = '...'; 
    return this.httpClient.post(address, body, options).toPromise(); 
}