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://...".

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.

Answer 2

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

Answer 3

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.

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.

Answer 5

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

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));

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.

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

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.