Angular 2 http post params and body

Question

I am trying to make an api call from my angular application. What I want to do is send a send request in api with the command parameter. I spent a lot of testing on the server side as well as make an outgoing request, and the data $_POSTand bodynever was. Therefore, I am sure that the problem lies in this piece of code.

public post(cmd: string, data: object): Observable<any> {

    const params = new URLSearchParams();
    params.set('cmd', cmd);

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      params: params,
      body: data,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post('http://t2w.dev/index.php', data, options)
      .map(this.handleData)
      .catch(this.handleError);
  }

I tried many different JSON structures like data, but this is the core of what I'm trying to send:

{
  "Username": "No thanks",
  "Password": "Donno"
}

this.handleDataand this.handleError- this is a method that takes data and error as arguments, and returns only what I want.

Api is configured to register anything going through $_POSTthat works fine when starting a request from anywhere except my angular app. What i have done so far:

• URLSearchParams.
• .
• RequestOptions.
• .
• .
• JSON.stringify({ " ": " ", "": "" }

RequestOptions

: { "method": null, "headers": { "Content-Type": [ "application/json" ], "Accept": [ "application/json" ], "X-CLIENT-ID": [ "380954038" ], "X--": [ "5BgqRO9BMZ4iocAXYjjnCjnO7fHGN59WP8BTRZ5f" ]}, "": "{}", "URL": NULL, "PARAMS": { "rawParams": "," queryEncoder ": {}," paramsMap ": {}}," withCredentials ": " responseType ": 1} VM8529: 1 XHR : POST" http://t2w.dev/index.php ".

- , ?

Answer 1

, @trichetriche. RequestOptions, -, params body RequestOptions . , , . , . .

public post(cmd: string, data: string): Observable<any> {

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post(this.BASE_URL, JSON.stringify({
      cmd: cmd,
      data: data}), options)
      .map(this.handleData)
      .catch(this.handleError);
  }

Answer 2

http.post - , , URL. data .

post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response>

public post(cmd: string, data: object): Observable<any> {

    const params = new URLSearchParams();
    params.set('cmd', cmd);

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      params: params,
      withCredentials: false
    });

    console.log('Options: ' + JSON.stringify(options));

    return this.http.post(this.BASE_URL, data, options)
      .map(this.handleData)
      .catch(this.handleError);
  }

---

1- (BASE_URL). URL- ( ), . , , , (, ?).

JSON.stringify / , http.

, , , . , . , , POSTMAN Fiddler - , , ( Angular).

Answer 3

Yes, the problem is here. This is due to your syntax.

Try using

return this.http.post(this.BASE_URL, params, options)
  .map(data => this.handleData(data))
  .catch(this.handleError);

instead

return this.http.post(this.BASE_URL, params, options)
  .map(this.handleData)
  .catch(this.handleError);

In addition, the second parameter should be the body, not the url parameters.

Answer 4

It looks like you are using Angular 4.3 version, I also ran into the same problem. Use Angular 4.0.1 and submit the code using @trichetricheand and it will work. I'm also not sure how to solve it on Angular 4.3: S