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

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. — Rohan Kangale, Feb 01 '18 at 07:27
It looks correct at first glance. Have you double checked that `this.configurationService.propertySystemApiUrl`is 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)); — John, Feb 01 '18 at 07:32
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. — user8300647, Feb 01 '18 at 07:47
Configuration code - @Injectable() export class Configuration { propertySystemApiUrl = "https://abc.xyz.com/api/v1/exports/projects" } — user8300647, Feb 01 '18 at 07:49
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. — parzival, Sep 09 '18 at 20:21

score 9 · Answer 1 · edited Mar 12 '18 at 22:35

9

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.

edited Mar 12 '18 at 22:35

Peter Mortensen

30,738
21
105
131

answered Mar 09 '18 at 23:44

Jose Manuel Casani Guerra

101
5

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. – Peter Mortensen Mar 12 '18 at 22:36
the trouble with this answer is that the error that OP describes also manifests when no Angular Universal is present. – André Werlang Nov 16 '18 at 20:01

Stephan Rauh · Answer 2 · 2018-11-18T19:08:23.293

3

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

edited Nov 18 '18 at 19:08

answered Mar 12 '18 at 09:40

Stephan Rauh

3,069
2
18
37

score 2 · Answer 3 · edited Mar 11 '18 at 23:33

2

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

edited Mar 11 '18 at 23:33

Ronan Boiteau

9,608
6
34
56

answered Feb 25 '18 at 01:40

guest

45
2

According to [https://github.com/angular/angular/issues/22022#issuecomment-363602769](the Angular bugtracker), status code 0 indicates a CORS problem. So the answer shouldn't have been downvoted. – Stephan Rauh Mar 12 '18 at 09:35
This is incomprehensible. Can you fix it (by editing your answer)? – Peter Mortensen Mar 12 '18 at 22:31
@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. – André Werlang Nov 16 '18 at 21:06
@AndréWerlang You've convinced me! – Stephan Rauh Nov 18 '18 at 19:04

score 2 · Answer 4 · answered Jul 24 '18 at 23:17

2

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.

answered Jul 24 '18 at 23:17

ymerej

727
1
8
21

score 1 · Answer 5 · edited Oct 03 '18 at 12:12

1

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:

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

edited Oct 03 '18 at 12:12

Guillermo Cacheda

2,162
14
23

answered Oct 03 '18 at 11:14

Rahul Singh Raghav

93
2
7

score 0 · Answer 6 · edited Mar 12 '18 at 22:33

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

score 0 · Answer 7 · answered Feb 25 '19 at 22:40

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.

score 0 · Answer 8 · answered Jul 26 '19 at 12:35

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

score 0 · Answer 9 · answered Oct 28 '19 at 18:35

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.

score 0 · Answer 10 · answered Jan 22 '22 at 21:46

0

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

answered Jan 22 '22 at 21:46

Arun

836
1
12
19

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

10 Answers10

Linked