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?
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 .
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.
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.
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',
})
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',
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With