How to post a string in the body of a post request with Angular 4.3 HttpClient?

Question

We\'ve got a .net WebAPI which looks for a filepath string in the body of a post request and returns the corresponding image. I\'m struggling to successfully pass a string t

Answer 1

You can get the path from query by removing [fromBody] attribute

public HttpResponseMessage ImagesFromPaths(HttpRequestMessage request, string path)

and in post send path in post request ${apiUrl}/${path}:

return this.http.post(
  `${apiUrl}/${path}`,
  { headers: new HttpHeaders({
    'Content-Type': 'application/json',
  }), responseType: 'blob',
  })

Answer 2

I just tried another altrnative way by this options and directing posting String path Json to body of post method.

 getImage(path: string) {
            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });

            return new Promise((resolve, reject) => {
                this.http.post('${apiUrl}',path, options)
                .map((res) => res.json()).share()
                .subscribe(res => {
                  resolve(res)
                }, (err) => {
                  reject(err);
                });
            });
          }

I would be happy if it works.Thanks

Answer 3

There is almost everything good with your code. Main issue is Content-Type header. If you want to send string to .NET REST API with [FromBody] annotation and use application/json header value you should add "" to your path param for example "test_value":

return this.http.post(
  `${apiUrl}`,
    `\"${path}\"` ,
  { headers: new HttpHeaders({
    'Content-Type': 'application/json',
  }), responseType: 'blob',
  })

You can also use x-www-form-urlencoded header value. Then you must pass your param to request body in that way:

return this.http.post(
  `${apiUrl}`,
    `=${path}` ,
  { headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
  }), responseType: 'blob',
  })