Angular HttpClient "Http failure during parsing"
I try to send an POST request from Angular 4 to my Laravel backend.
My LoginService has this method:
login(email: string, password: string) {
return this.http.post(`http://10.0.1.19/login`, { email, password })
}
I subscribe to this method in my LoginComponent:
.subscribe(
(response: any) => {
console.log(response)
location.reload()
},
(error: any) => {
console.log(error)
})
And this is my Laravel backend method:
...
if($this->auth->attempt(['email' => $email, 'password' => $password], true)) {
return response('Success', 200);
}
return response('Unauthorized', 401);
My Chrome dev tools says that my request was a success with 200 status code. But my Angular code triggers the error block and gives me this message:
Http failure during parsing for http://10.0.1.19/api/login
If I return an empty array from my backend, it works... So Angular is trying to parse my response as JSON? How can i disable this?
You can specify that the data to be returned is not JSON using responseType.
In your example, you can use a responseType string value of text:
return this.http.post(
'http://10.0.1.19/login',
{email, password},
{responseType: 'text'})
The full list of options for responseType is:
json (the default)
text
arraybuffer
blob
See the docs for more information.
I just want to add that you have to omit the generic argument on the get/post method method (.get<T>).
✔️ This will work:
this.http.get(`https://myapi.com/health`, {responseType: 'text'})
❌ This will not work:
this.http.get<string>(`https://myapi.com/health`, {responseType: 'text'})
The later will produce an error:
The expected type comes from property 'responseType' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'
if you have options
return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
Even adding responseType, I dealt with it for days with no success. Finally I got it. Make sure that in your backend script you don't define header as -("Content-Type: application/json);
Becuase if you turn it to text but backend asks for json, it will return an error...
I had the same problem and the cause was That at time of returning a string in your backend (spring) you might be returning as return "spring used"; But this isn't parsed right according to spring. Instead use return "\" spring used \""; -Peace out
In my case the problem was a missing "/" in the url call, just after the resource. It was then trying to fetch the angular component (html) instead of the JSON resource. I hope this helps since I did not found the answer to my question in this thread.
You should also check you JSON (not in DevTools, but on a backend). Angular HttpClient having a hard time parsing JSON with \0 characters and DevTools will ignore then, so it's quite hard to spot in Chrome.
Based on this article
I had the same problem, but in my case I forgot to add the proxy url to the api.
readonly apiUrl = this.appConfigService.appConfig.apiUrl + 'EndPointUrl';
This answer helped me figure it out: https://stackoverflow.com/a/66887643/12134299
For my case, I had a line break from PHP results.
E.g.,
echo json_encode($row)."\<br/>";
I removed the <br/> and all was well.
I was facing the same issue in my Angular application. I was using RocketChat REST API in my application and I was trying to use the rooms.createDiscussion, but as an error as below.
ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"myurl/rocketchat/api/v1/rooms.createDiscussion","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for myrul/rocketchat/api/v1/rooms.createDiscussion","error":{"error":{},"text":"
I have tried couple of things like changing the responseType: 'text' but none of them worked. At the end I was able to find the issue was with my RocketChat installation. As mentioned in the RocketChat change log the API rooms.createDiscussion is been introduced in the version 1.0.0 unfortunately I was using a lower version.
My suggestion is to check the REST API is working fine or not before you spend time to fix the error in your Angular code. I used curl command to check that.
curl -H "X-Auth-Token: token" -H "X-User-Id: userid" -H "Content-Type: application/json" myurl/rocketchat/api/v1/rooms.createDiscussion -d '{ "prid": "GENERAL", "t_name": "Discussion Name"}'
There as well I was getting an invalid HTML as a response.
<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="origin-when-crossorigin">
<script>/* eslint-disable */
'use strict';
(function() {
var debounce = function debounce(func, wait, immediate) {
Instead of a valid JSON response as follows.
{
"discussion": {
"rid": "cgk88DHLHexwMaFWh",
"name": "WJNEAM7W45wRYitHo",
"fname": "Discussion Name",
"t": "p",
"msgs": 0,
"usersCount": 0,
"u": {
"_id": "rocketchat.internal.admin.test",
"username": "rocketchat.internal.admin.test"
},
"topic": "general",
"prid": "GENERAL",
"ts": "2019-04-03T01:35:32.271Z",
"ro": false,
"sysMes": true,
"default": false,
"_updatedAt": "2019-04-03T01:35:32.280Z",
"_id": "cgk88DHLHexwMaFWh"
},
"success": true
}
So after updating to the latest RocketChat I was able to use the mentioned REST API.
I use .NetCore for my back-end tasks,I was able to resolve this issue by using the Newtonsoft.Json library package to return a JSON string from my controller.
Apparently, not all JSON Serializers are built to the right specifications..NET 5's "return Ok("");" was definitely not sufficient.
Follow WeChat
Success story sharing
return this.http.post<any>(this._addToUpvotersListURL, { responseType: 'text' });