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 to it from Angular 4.3 using the new httpClient. Is it possible? The endpoint's being used by other stuff so I don't really want to create a 'model' of... a string just so I can basically duplicate it but pass it json if possible.

WebAPI method signature:

public HttpResponseMessage ImagesFromPaths(HttpRequestMessage request, [FromBody] string path)

Current service method:

getImage(path: string): Observable<any> {

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

Got to be an easy thing to achieve?

Quintile

Answer 1

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',
  })

Cavan

Adding quotes is cumbersome and when using Swagger generated code not even possible. I have created an HTTP interceptor that adds quotes automatically when you pass just a string and use content-type application/json. See also #57324399 – Galvan

Answer 2

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',
  })

Calcine

Answer 3

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

Expansible