Angular 4: "Http failure response for (unknown URL): 0 Unknown Error"

Question

I am trying to consume an API URL. I am calling the API with the below code.

import {HttpClient, HttpClientModule, HttpParams} from "@angular/common/http";

@Injectable()
export class PropertyPrefService {

    constructor(private http: HttpClient,
                private configurationService:Configuration) {}

    public searchProjects(propFilter:string):any{
        let temp:any;
        const options = propFilter ?
        {
            params: new HttpParams().set('query', propFilter)
        } : {};

        return this.http.get<any>(this.configurationService.propertySystemApiUrl, options)
                    .subscribe((results:any) => {
                        console.log(results);
                    });
    }

In the Angular code I am not getting any response and am getting an error:

Http failure response for (unknown url): 0 Unknown Error".

However, when I make a request if I open up developer tools on Chrome, I see that the response is received from the server.

The URL is the "https://..." URL and not "http://...".

Julissajulita

Just try with return this.http.get(this.configurationService.propertySystemApiUrl,options) .subscribe((results:any) => { console.log(results); }); I believe that the api url is correct. – Divaricate

It looks correct at first glance. Have you double checked that this.configurationService.propertySystemApiUrlis actually your url? Try doing a console log before the http-request. Where do you call the method? I think maybe you need to add a return statement inside subscribe. return results (after console.log(results)); – Darrick

Can you share "configurationService" code? – Helban

yes the link is correct. I am getting response but I can see that in Chrome developer tools. Through this angular code it is giving error. – Julissajulita

Configuration code - @Injectable() export class Configuration { propertySystemApiUrl = "abc.xyz.com/api/v1/exports/projects" } – Julissajulita

can you share **Status Code ** you getting in Dev. tool ?? – Privative

Status code 200 – Julissajulita

I got the same error when back-end job takes to much time. So Observable returns with this error, but back-end job continue to run to the end. – Electrotechnology

Answer 1

The problem is Angular Universal used Express, and the security validates the SSL certificate to the server; I used a self-signed SSL certificate.

The solution is to add NODE_TLS_REJECT_UNAUTHORIZED=0 to your environment to disable the SSL verification in Node.js. You should only set this in development; in production it is very risky.

Coulombe

Can you take a look near "the security validates the SSL certificate" and fix it if needed (by editing your answer)? E.g., what is meant by "the security" (it was in the original revision of your answer) - again, respond by editing your answer. – Rouault

the trouble with this answer is that the error that OP describes also manifests when no Angular Universal is present. – Hillinck

Answer 2

Quoting Sander Elias on Google Groups:

"Error 0 is what you get when the request does not go out. Most common cause of this is that CORS is not configured correctly on the server. Let me rephrase that to: In 98% of the cases, this is a server side issue."

Hoshi

Answer 3

You are not in the same domain, same protocol, same port between backend and frontend.

Tenishatenn

According to [github.com/angular/angular/issues/… Angular bugtracker), status code 0 indicates a CORS problem. So the answer shouldn't have been downvoted. – Hoshi

This is incomprehensible. Can you fix it (by editing your answer)? – Rouault

@StephanRauh this answer states a request to a server on a different protocol, domain or port will fail with status code 0. This statement is inaccurate. a) It doesn't need to be the case, when properly configurated and b) it can also fail on the same protocol/domain/port (which doesn't seem to be the case here). Also, the answer tries to explain but is low effort. – Hillinck

@AndréWerlang You've convinced me! – Hoshi

Answer 4

Just in case anyone else stumbles on this, none of these solutions worked for me. What worked for me was turning off uBlock Origin. It was blocking any url that had the word "ad" in it for obvious reasons.

Softboiled

Answer 5

Agreeing to @StephanRauh and want to add few points to his. This happens when a request does not go out or it is not able to talk to server for some reason.
The reasons could be:

1. If the internet connectivity is very slow to connect to server or not at all available.
2. The server itself is down i.e. there is no handler for our request.

Marutani

Answer 6

I had exactly the same problem. I had been able to see the result within the Chrome developer tools. But I always got the Http failure response for (unknown url): 0 Unknown Error error message.

In my case the reason was I used responseType:'text' to query a payload text/html. But this isn't compatible for some reason. I had to switch to responseType: 'blob' and used the FileReader to convert the blob into a string.

So I guess you have the same problem when the returned content doesn't match your configured responseType. By the way default it is json.

   this.httpClient.get(url, {responseType: 'blob'})
        .subscribe(data => {
          const reader = new FileReader();
          reader.onloadend = (e) => {
            const readerResult = reader.result;
            console.log(readerResult); // Print blob content as text
          };
          reader.readAsText(data, 'UTF-8');

        }, error => console.log(error));

Vanquish

Answer 7

I ran into this issue when testing an angular app from iPhone/iPad devices. App was working fine from the desktop. I had cors enabled on node server but still getting this error. So, I did the following to resolve it.

Run ng serve using IP: ng serve --host 192.168.1.10

Point APIs using IP: In the environment.ts I changed URL to below:

apiUri: 'http://192.168.1.10:9000/api'

Now I can access URL from mobile devices.

Bistort

Answer 8

TL;DR: /etc/hosts missing entry with the domain name.

In Angular Universal, I had a problem, that the SSR part was throwing that error due to the fact, that server-side rendering happens on the server ( ;) ).

Say my website was available at https://myproject.com/ and running all well. When you directly hit any URL, the SSR launches. Now, if the SSR has to make an API call, it would make an HTTP request to https://myproject.com/api/blah/show in the local network. And this is where it was throwing an error.

To debug, I tried to run curl https://myproject.com/api/blah/show (on the VPS) and I'd get an error.

To fix that, I had to add to my /etc/hosts file the following line:

127.0.0.1 myproject.com

After that, both curl command and SSR worked!

Stack:

• Ubuntu 16 & 18
• Nginx
• Let's Encrypt SSL
• Angular Universal
• Express

Saluki

Answer 9

I faced this issue when I'm trying to consume Azure Search Service in my angular project. Then when I enabled the CORS which accepts requests from all origin then I started to get the response back.

Please check your Developer Tools (Console) in your chrome. It could give you some insights about the request.

Nerveracking

Answer 10

i switched from node 8 to node 12 and the issue is magically gone.

Hamstring