Angular 4: “Http failure response for (unknown URL

问题:

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

回答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.

回答2:

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

回答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.

回答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.

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

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

回答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.