Angular 2 http post params and body

Question

I m trying to do an api call from my angular app  What I want to do is send a post request to the api with a command param  I have done a lot of server side testing as well as going through the outgoing request  and the   POST nor body data is never there  I am therefore pretty sure that the problem lays within this piece of code   public post cmd  string  data  object   Observable lt any gt         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 have tried many different JSON structures as data but this is the core of what I am trying to send        Username    No thanks      Password    Donno      this handleData and this handleError is a method taking data and error as arguments  and returns just what I want   The api is setup to log anything coming through   POST which works fine when running request from anywhere but my angular app  What I have done so far    Passing raw query instead of URLSearchParams  Passing the request without body  Passing all values in RequestOptions  Passing params as string  Passing body as params   Passing body as JSON stringify    Username    No thanks    Password    Donno          Console output of RequestOptions      Options    method  null  headers    Content-Type    application json    Accept    application json    X-CLIENT-ID    380954038    X-CLIENT-SECRET    5BgqRO9BMZ4iocAXYjjnCjnO7fHGN59WP8BTRZ5f     body        url  null  params    rawParams      queryEncoder      paramsMap       withCredentials  false  responseType  1    VM8529 1 XHR finished loading  POST  http   t2w dev index php     Anyone have any clue why the data never gets sent

User · Accepted Answer

And it works  thanks  trichetriche  The problem was in my RequestOptions  apparently  you can not pass params or body to the RequestOptions while using the post  Removing one of them gives me an error  removing both and it works  Still no final solution to my problem  but I now have something to work with  Final working code   public post cmd  string  data  string   Observable lt any gt         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

User · Answer

Yes the problem is here  It s related to your syntax    Try using this   return this http post this BASE URL  params  options     map data   gt  this handleData data      catch this handleError     instead of   return this http post this BASE URL  params  options     map this handleData     catch this handleError     Also  the second parameter is supposed to be the body  not the url params

User · Answer

Seems like you use Angular 4 3 version  I also faced with same problem  Use Angular 4 0 1 and post with code by  trichetricheand and it will work  I am also not sure how to solve it on Angular 4 3  S

User · Answer

The 2nd parameter of http post is the body of the message  ie the payload and not the url search parameters  Pass data in that parameter  From the documentation  post url  string  body  any  options   RequestOptionsArgs    Observable lt Response gt   public post cmd  string  data  object   Observable lt any gt         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         Edit You should also check out the 1st parameter  BASE URL   It must contain the complete url  minus query string  that you want to reach  I mention in due to the name you gave it and I can only guess what the value currently is  maybe just the domain    Also there is no need to call JSON stringify on the data payload that is sent in the http body  If you still can t reach your end point look in the browser s network activity in the development console to see what is being sent  You can then further determine if the correct end point is being called wit the correct header and body  If it appears that is correct then use POSTMAN or Fiddler or something similar to see if you can hit your endpoint that way  outside of Angular

User · Answer

Let said our backend looks like this   public async Task lt IActionResult gt  Post  FromBody  IList lt UserRol gt  roles  string notes         We have a HttpService like this       post lt T gt  url  string  body  any  headers   HttpHeaders  params   HttpParams   Observable lt T gt            return this http post lt T gt  url  body    headers  headers  params            Following is how we can pass the body and the notes as parameter         how to call it  const headers  HttpHeaders   new HttpHeaders        Authorization    Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXX       const bodyData   this getBodyData       get whatever we want to send as body  let params  HttpParams   new HttpParams    params   params set  notes    Some notes to send     this httpService post lt any gt  url  bodyData  headers  params      It worked for me  using angular 7    I hope is useful for somebody

[angular] Angular 2 http post params and body

Examples related to angular

Examples related to angular-http