Schreiben von Formularen in Winkelform 5

Question

Ich versuche eine Anwendung mit einem Spring-Backend und einem Angular 5-Frontend zu entwickeln. Für den Login benutze ich Spring Security und im Frontend versuche ich die Login Daten als x-www-form-urlencoded zu posten. Das Back-End erhält jedoch null für Benutzername und Kennwort. Die Angular 5-Dokumentation für HttpClient bietet Beispiele nur zum Veröffentlichen von JSON-Daten und Http wurde veraltet.

Vorschläge, wie Sie dies beheben können, wären sehr willkommen.

Hier ist mein Eckige Code:

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

Und der Server-Endpunkt:

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

bearbeiten: Ich vergaß zu erwähnen, wenn ich es mit Postman testen, ohne ein Problem funktioniert

Answer 1

Das neue Modul HTTPClient funktioniert nur mit unveränderlichen Typen. Dies bedeutet, dass Header und Parameter nicht geändert werden können. Die append() Operation gibt tatsächlich eine Kopie Ihres Originals mit der hinzugefügten Kopfzeile zurück.

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

Stattdessen Sie das zurückgegebene Objekt erfassen möchten:

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

Als Nebenbei bemerkt, würde ich callPostWithOptions ändern die toPromise() operator zu verwenden:

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