web-dev-qa-db-ger.com

Angular2 - Http POST Anforderungsparameter

Ich versuche, eine POST -Anfrage zu stellen, kann sie aber nicht zum Laufen bringen:

testRequest() {
      var body = 'username=myusername?password=mypassword';
      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');

      this.http
        .post('/api',
          body, {
            headers: headers
          })
          .subscribe(data => {
                alert('ok');
          }, error => {
              console.log(JSON.stringify(error.json()));
          });
}

Ich möchte im Grunde diese http-Anfrage (nicht Ajax) replizieren, als ob sie von einem HTML-Formular stammt:

URL:/api

Params: Benutzername und Passwort

typescriptangular
80
Christopher

Ich denke, dass der Körper für einen application/x-www-form-urlencoded-Inhaltstyp nicht korrekt ist. Sie könnten versuchen, dies zu verwenden:

var body = 'username=myusername&password=mypassword';

Ich hoffe, es hilft dir. Thierry

38
Thierry Templier

Update für Angualar 4.3+

Jetzt können wir HttpClient anstelle von Http verwenden.

Führer ist hier

Beispielcode

const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
let body = new HttpParams();
body = body.set('username', USERNAME);
body = body.set('password', PASSWORD);
http
  .post('/api', body, {
    headers: myheader),
  })
  .subscribe();

Veraltet

Oder du kannst das so machen:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()

Update Oktober/2017

Von angle4 + brauchen wir keine headers oder .toString() Sachen. Stattdessen können Sie das unten stehende Beispiel ausführen

import { URLSearchParams } from '@angular/http';

POST/PUT-Methode

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
this.http.post('/api', urlSearchParams).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

GET/DELETE-Methode

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', username);
    urlSearchParams.append('password', password);
    this.http.get('/api', { search: urlSearchParams }).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

Für JSON application/json Content-Type

this.http.post('/api',
      JSON.stringify({
        username: username,
        password: password,
      })).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
      )
92
Frank Nguyen

In späteren Versionen von Angular2 müssen Sie den Content-Type-Header nicht manuell festlegen und den Haupttext kodieren, wenn Sie ein Objekt des richtigen Typs als body übergeben.

Sie können das einfach tun

import { URLSearchParams } from "@angular/http"


testRequest() {
  let data = new URLSearchParams();
  data.append('username', username);
  data.append('password', password);

  this.http
    .post('/api', data)
      .subscribe(data => {
            alert('ok');
      }, error => {
          console.log(error.json());
      });
}

Auf diese Weise wird Winkel den Körper für Sie kodieren und den korrekten Content-Type-Header festlegen.

P.S. Vergessen Sie nicht, URLSearchParams aus @angular/http zu importieren, sonst funktioniert es nicht.

40
VStoykov

um nur eine vollständige Antwort zu geben:

login(username, password) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        let urlSearchParams = new URLSearchParams();
        urlSearchParams.append('username', username);
        urlSearchParams.append('password', password);
        let body = urlSearchParams.toString()
        return this.http.post('http://localHost:3000/users/login', body, {headers:headers})
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                console.log(response);
                var body = response.json();
                console.log(body);
                if (body.response){
                    let user = response.json();
                    if (user && user.token) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify(user)); 
                    }
                }
                else{
                    return body;
                }
            });
    }
6
dang

Diese Antworten sind alle veraltet für Benutzer, die den HttpClient anstelle von Http verwenden. Ich fing an, verrückt zu werden: "Ich habe URLSearchParams importiert, aber es funktioniert immer noch nicht ohne .toString () und den expliziten Header!"

Verwenden Sie mit HttpClient HttpParams anstelle von URLSearchParams und beachten Sie die body = body.append()-Syntax, um mehrere Parameter im Textkörper zu erreichen, da wir mit einem unveränderlichen Objekt arbeiten:

login(userName: string, password: string): Promise<boolean> {
    if (!userName || !password) {
      return Promise.resolve(false);
    }

    let body: HttpParams = new HttpParams();
    body = body.append('grant_type', 'password');
    body = body.append('username', userName);
    body = body.append('password', password);

    return this.http.post(this.url, body)
      .map(res => {
        if (res) {          
          return true;
        }
        return false;
      })
      .toPromise();
  }
4
333Matt

Wenn jemand mit Winkelversion 4+ (meiner war 4.3.6) zu kämpfen hat. Dies war der Beispielcode, der für mich funktioniert hat.

Fügen Sie zuerst die erforderlichen Importe hinzu

import { Http, Headers, Response, URLSearchParams } from '@angular/http';

Dann für die API-Funktion. Es ist ein Anmeldebeispiel, das nach Ihren Bedürfnissen geändert werden kann.

login(username: string, password: string) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', username);
    urlSearchParams.append('password', password);
    let body = urlSearchParams.toString()

    return this.http.post('http://localhost:3000/api/v1/login', body, {headers: headers})
        .map((response: Response) => {
            // login successful if user.status = success in the response
            let user = response.json();
            console.log(user.status)
            if (user && "success" == user.status) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user.data));
            }
        });
}
3
Krishnadas PC

Ich hatte Probleme mit jedem Ansatz, der mehrere Parameter verwendete, aber es funktioniert ziemlich gut mit einzelnen Objekten

api: 

    [HttpPut]
    [Route("addfeeratevalue")]
    public object AddFeeRateValue(MyValeObject val)

eckig:

var o = {ID:rateId, AMOUNT_TO: amountTo, VALUE: value};
return this.http.put('/api/ctrl/mymethod', JSON.stringify(o), this.getPutHeaders());


private getPutHeaders(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new RequestOptions({
        headers: headers
        , withCredentials: true // optional when using windows auth
    });
}
0
Sonic Soul