Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 991
user3302396 Avatar asked Nov 17 '17 16:11

user3302396


People also ask

How do you send a string in a post method?

Redirect("http://www.teprocess.co.in/Gateway/Request.jsp?msg="+strMsg); I Send string message with query string and the hit the above URL with String message strmsg .

What does HttpClient post return Angular?

The HttpClient. post() returns Observable instance of given response type. On this page we will see injecting HttpClient , creating request body and passing HTTP options. We will also look into error handling. For the demo we will use Angular In-Memory Web API to post data.

Can we send request body in GET request in Angular?

Just to clarify some of the answers here, firstly, as stated Angular does not support supplying a body with a GET request, and there is no way around this. The reason for that is not Angular's fault but that of XMLHttpRequest (XHR), the API that browsers use for making requests.


2 Answers

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',
  })
like image 76
matejko219 Avatar answered Oct 06 '22 15:10

matejko219


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',
  })
like image 25
Yerkon Avatar answered Oct 06 '22 14:10

Yerkon