Angular2 - HTTP-POST-Anforderungsparameter

Ich versuche eine POST-Anfrage zu stellen, aber ich kann sie 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()));
          });
}

Grundsätzlich möchte ich diese http-Anfrage (nicht Ajax) so replizieren, als ob sie von einem HTML-Formular stammt:

URL: / api

Parameter: Benutzername und Passwort

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

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

Hoffe es hilft dir, Thierry

Update für Angualar 4.3+

Jetzt können wir HttpClientstatt verwendenHttp

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 Sie können so tun:

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

Update Okt / 2017

Von angular4 + , brauchen wir nicht headers, oder .toString()stopft. Stattdessen können Sie wie im folgenden Beispiel vorgehen

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/jsonInhaltstyp

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

In späteren Versionen von Angular2 ist es nicht erforderlich, den Content-TypeHeader manuell festzulegen und den Body zu codieren, wenn Sie ein Objekt des richtigen Typs als übergeben body.

Sie können dies 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 codiert eckig den Körper für Sie und setzt den richtigen Content-TypeHeader.

PS Vergessen Sie nicht importieren URLSearchParamsaus @angular/httpoder es wird nicht funktionieren.

Nur um eine vollständige Antwort zu erhalten:

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

Diese Antworten sind alle veraltet, wenn Sie den HttpClient anstelle von Http verwenden. Ich fing an verrückt zu werden und dachte: "Ich habe den Import von URLSearchParams durchgeführt, 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 Body 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();
  }

Wenn jemand mit der eckigen Version 4+ zu kämpfen hat (meine war 4.3.6) . 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 je nach Bedarf 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));
            }
        });
}

Ich hatte Probleme bei jedem Ansatz mit mehreren Parametern, aber es funktioniert ziemlich gut mit einem einzelnen Objekt

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

angular: 
    MethodName(stringValue: any): Observable<any> {
    let params = new HttpParams();
    params = params.append('categoryName', stringValue);

    return this.http.post('yoururl', '', {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      params: params,
      responseType: "json"
    })
  }

api:   
  [HttpPost("[action]")]
  public object Method(string categoryName)

Ich bin hier gelandet, als ich versucht habe, etwas Ähnliches zu tun. Für einen Inhaltstyp application / x-www-form-urlencoded können Sie versuchen, diesen für den Body zu verwenden:

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

Bei dem, was Sie versucht haben, wird der dem Körper zugewiesene Wert eine Zeichenfolge sein.