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    gt            console log response          location reload                error  any    gt            console log error           And this is my Laravel backend method        if  this- gt auth- gt attempt   email    gt   email   password    gt   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

User · Answer

if you have options  return this http post    this endpoint  account login  payload       options  responseType   text

User · Answer

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   quot return Ok  quot  quot    quot  was definitely not sufficient

User · Answer

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  like this  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

User · Answer

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

User · Answer

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

User · Answer

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     lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta name  referrer  content  origin-when-crossorigin  gt   lt script gt    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

User · Answer

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

[angular] Angular HttpClient "Http failure during parsing"

Examples related to angular

Examples related to typescript

Examples related to angular-httpclient