Getting status code 0 angular HttpClient?

I have a strange problem using the angular 4's HttpClient get method.

There are some custom error messages returned from the backend which I should handle and display to the user. However I get HttpErrorResponse in the console

HttpErrorResponse:
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, 
total: 0, type: "error", …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: 
Map(0)}
message: "Http failure response for (unknown url): 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: null

I read about the problem here but none of the solutions helped me. In the network tab of the browser I'm able to observe the real response from the server:

"{\"StatusCode\":400,
  \"ExceptionMessage\":\"Internal Server Error\",
  \"Error\":\"Internal Server Error\",
  \"Errors\": 
  [{\"Code\":\"ValidationError\",\"Message\":\"Custom message here.\"}]}"

The request seems like this in the network tab:

General: 
Request URL: https://asdfhost:port/5c77a77101ae8643aeeb61e9
Request Method: GET
Status Code: 400 
Remote Address: address
Referrer Policy: no-referrer-when-downgrade

Response Headers:
cache-control: no-cache
content-type: application/json
date: Thu, 28 Feb 2019 09:42:22 GMT
expires: -1
pragma: no-cache
server: Kestrel
status: 400

Request Headers: 
x-correlation-id: 6if123
Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer asdfasdftoken
Origin: http://origin
Referer: http://origin/somewhere
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36

Is there a chance the custom errors to break the xhr request ? Any help will be highly appreciated. :)

Solution 1:

Indeed it was a CORS problem. When an error occurred the back-end didn't set the Allow Origin header.

Solution 2:

I had CORS enabled in my server and i was still getting the status 0, after digging the internet i find no solution then i tried some things and found out it was CORS issue however it was still returning status 0 because i had configured virtual host and virtual domain in hosts file and Angular Universal was calling actual domain not the loopback localhost domain. that is why it was getting invalid response from server.

according to my research so you will get status 0 in following conditions

1 - if Cross Origin Resource Sharing(CORS) headers are not set to * or requesting domain

2 - Sometimes CORS is enabled in normal request but not in PRE-FLIGHT request(options request) make sure you enable CORS on it as well.

3 - You are using invalid domain or domains which are forwarding the requests to other domain .

Solution 3:

This may have been a CORS error on the surface while the real problem is incorrect handling of CORS errors. For example why is there no content-length response header.

According to the official documentation (as of Oct '21) HttpClient request errors have two types:

• The server backend might reject the request, returning an HTTP response with a status code such as 404 or 500. These are error responses.

• Something could go wrong on the client-side such as a network error that prevents the request from completing successfully or an exception thrown in an RxJS operator. These errors have status set to 0 and the error property contains a ProgressEvent object, whose type might provide further information.

Cross origin resource sharing errors are normal HTTP responses to the preflight requests made by your browser. When the web server responds to a preflight request it may set the response status to any code. Generally a 4xx.

Some tools may explicitly set the status to 0 if CORS fails, but this is not a hard rule.