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
– Rohan Kangale, Commented Feb 1, 2018 at 7:27
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)); — John
– John, Commented Feb 1, 2018 at 7: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
– user8300647, Commented Feb 1, 2018 at 7:47
Configuration code - @Injectable() export class Configuration { propertySystemApiUrl = "abc.xyz.com/api/v1/exports/projects" } — user8300647
– user8300647, Commented Feb 1, 2018 at 7:49

Peter Mortensen · Accepted Answer · 2018-03-12 22:35:57Z

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, 2018 at 22:35

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 9, 2018 at 23:44

Jose Manuel Casani Guerra

1015 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Mortensen Over a year ago

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.

André Werlang Over a year ago

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

Stephan Rauh · Accepted Answer · 2018-11-18 19:08:23Z

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, 2018 at 19:08

answered Mar 12, 2018 at 9:40

Stephan Rauh

3,1302 gold badges21 silver badges37 bronze badges

Comments

Ronan Boiteau · Accepted Answer · 2018-03-11 23:33:52Z

2

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

edited Mar 11, 2018 at 23:33

Ronan Boiteau

10.3k7 gold badges39 silver badges62 bronze badges

answered Feb 25, 2018 at 1:40

guest

452 bronze badges

4 Comments

Stephan Rauh Over a year ago

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

Peter Mortensen Over a year ago

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

André Werlang Over a year ago

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

Stephan Rauh Over a year ago

@AndréWerlang You've convinced me!

ymerej · Accepted Answer · 2018-07-24 23:17:38Z

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, 2018 at 23:17

ymerej

7441 gold badge8 silver badges22 bronze badges

Comments

Guillermo Cacheda · Accepted Answer · 2018-10-03 12:12:09Z

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 3, 2018 at 12:12

Guillermo Cacheda

2,24017 silver badges25 bronze badges

answered Oct 3, 2018 at 11:14

Rahul Singh Raghav

1032 silver badges7 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2018-03-12 22:33:07Z

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

Manish Jain · Accepted Answer · 2019-02-25 22:40:14Z

0

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.

answered Feb 25, 2019 at 22:40

Manish Jain

9,6795 gold badges43 silver badges45 bronze badges

Comments

srokatonie · Accepted Answer · 2019-07-26 12:35:48Z

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

Karthik Dhanasekaran · Accepted Answer · 2019-10-28 18:35:19Z

0

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.

answered Oct 28, 2019 at 18:35

Karthik Dhanasekaran

2104 silver badges11 bronze badges

Comments

Arun · Accepted Answer · 2022-01-22 21:46:34Z

0

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

answered Jan 22, 2022 at 21:46

Arun

8941 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

10 Answers 10

2 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related