Angular HttpClient "Http failure during parsing"

Question

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?

score 409 · Accepted Answer · edited Jul 19 '22 at 14:07

409

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.

edited Jul 19 '22 at 14:07

Leandro Bardelli

10,561
15
79
116

answered Sep 25 '17 at 15:12

Kirk Larkin

84,915
16
214
203

The same solution is not working for me. I dont want to oepn a new question as mine is almost the same question. Whats wrong here : `return this.http.post(this._addToUpvotersListURL, { responseType: 'text' });` – Tanzeel Oct 14 '21 at 18:42
2

@Tanzeel Please see my answer: https://stackoverflow.com/a/69582514/1163423 – Martin Brandl Oct 15 '21 at 09:20

score 74 · Answer 2 · answered Oct 15 '21 at 09:20

74

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; }'

answered Oct 15 '21 at 09:20

Martin Brandl

56,134
13
133
172

Yes this works, but why? – Fatih Ersoy Apr 04 '22 at 07:55
2

@FatihErsoy because there is no method overloading that accept a generic and the two parameters – Martin Brandl Apr 05 '22 at 11:00
1

arrg, you saved my a lot of time, thank you! – hogan Nov 22 '22 at 15:45
@MartinBrandl Maybe I am on a different version, but it seems that it does accept but hardcode limited to 'json' only. – Remy Dec 01 '22 at 13:15

score 30 · Answer 3 · answered Feb 02 '18 at 10:12

30

if you have options

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })

answered Feb 02 '18 at 10:12

Hiep Tran

3,735
1
21
29

7

An explanation would be helpful. http.post allows up to three arguments - what if I need to add a header as well? – Chiwda Sep 23 '20 at 01:40

score 8 · Answer 4 · answered Mar 28 '19 at 07:22

8

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...

answered Mar 28 '19 at 07:22

Shemi

81
1
1

1

Also you can set as parameters to new object derived from new class. then return this object as response. i.e. you can change your response to JSON format – whitefang Apr 16 '20 at 21:26

score 3 · Answer 5 · answered Nov 16 '19 at 14:59

3

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

answered Nov 16 '19 at 14:59

AVI

39
1

From Review: Hi, this post does not seem to provide a [quality answer](https://stackoverflow.com/help/how-to-answer) to the question. Please either edit your answer and improve it, or just post it as a comment. – sɐunıɔןɐqɐp Nov 16 '19 at 15:20
Alright..SO for eg. in my situation i was using Spring as backend and Angular at frontend. After the correct authentication my spring server has to return me a string "valid" which is processed only if the login info is correct. – AVI Nov 16 '19 at 23:27
The problem with my program was similar ie. Http failure during parsing....Then I realised that spring is considering " of my server response as special character.Hence, i had to return a string which backend can also understand... So i returned " \" valid \" " instead of "valid" and \ notation in web is used to specify an " (inverted coma) written inside of the inverted commas of string { " \" \" " instead of " " " " }. And after that error was nowhere to be seen..I hope its more clear now @ sɐunıɔןɐqɐp – AVI Nov 16 '19 at 23:33
Thank you for the answer. This worked fine for me too. – Ledjon Nov 14 '21 at 13:23

score 3 · Answer 6 · answered Mar 31 '21 at 12:11

3

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.

answered Mar 31 '21 at 12:11

user3067955

33
2

this answer gave me a hint to my problem, thanks here is the link to my answer: https://stackoverflow.com/a/69751345/12134299 – hghandi Oct 28 '21 at 09:18

score 1 · Answer 7 · answered Aug 06 '19 at 16:36

1

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

answered Aug 06 '19 at 16:36

druss

1,820
19
18

score 1 · Answer 8 · edited Oct 28 '21 at 09:20

1

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

edited Oct 28 '21 at 09:20

Dharman

30,962
25
85
135

answered Oct 28 '21 at 09:15

hghandi

104
1
9

score 1 · Answer 9 · edited Apr 19 '22 at 14:05

1

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.

edited Apr 19 '22 at 14:05

FortyTwo

2,414
3
22
33

answered Apr 19 '22 at 08:30

Daniel Kaniu

11
1

score 0 · Answer 10 · answered May 13 '19 at 06:05

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.

score 0 · Answer 11 · answered Dec 29 '20 at 06:28

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.

score 0 · Answer 12 · answered Mar 20 '23 at 19:09

0

Check is your JSON is valid JSON. I experience the exact same issue and I found that I had one extra comma "," in my json. If the JSON is "hardcoded" in the js file, extra comma is not a problem, but if it's served from a server, it's a problem.

answered Mar 20 '23 at 19:09

nikssa23

835
7
8

Angular HttpClient "Http failure during parsing"

12 Answers12

Linked

Related