XMLHttpRequest: NetworkError, status = 0

Hi
my app can’t retrive files over the internet. I am debugging it using

ionic run android -lcs

I get this error:

An error on the XMLHttpRequest:NetworkError---Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://boardlineapp.com/app/images/pros/gatiendelahaye.png'.
638   819639   log      http.readyState=4 for url=http://boardlineapp.com/app/images/pros/gatiendelahaye.png
639   819647   log      http.status=0 for url=http://boardlineapp.com/app/images/pros/gatiendelahaye.png

The function I use is:

.service('UrlExists', ['isPhoneGap', '$http', function(isPhoneGap, $http) {	
    this.f = function(url) {
		try {
            http = new XMLHttpRequest();
            http.open("HEAD", url, false);
            http.send();
        }
        catch (err) {
            console.log("An error on the XMLHttpRequest:" + err.name + "---" + err.message);
        }
		if (http.readyState == 4) {
			return http.status==200 || http.status==0;
		}
	}
}])

I am using the whitelist plugin, but I’ve got no <meta http-equiv=“Content-Security-Policy” in my index.html head.
I have the following in my config.xml:

<access origin="*"/>
<allow-navigation href="*"/>
<allow-intent href="*"/>

Can you please help ?

I’m sorry, but can you elaborate on what exactly you are trying to do with that service?

Are you just trying to load an external image? If so, that service seems unnecessary.

Hi @DaDanny,

no with that service I am trying to check if a local file or a remote file (on my server) is available, that’s why I am calling it UrlExists.

Ok gotcha. Well I have a solution for you:

If the files you are checking will all be images, I recommend this directive:

Instead of you manually writing a service to check if the image exists or not, you can just specify either a fall-back image (‘ng-error-src’) or a fall-back function call (‘ng-error’).

In my app, I do this for profile images. If the profile image doesn’t exist, I just display a default profile image. Works great!

You will see errors in the console such as
GET (your image url) 404 (Not Found), but you can either ignore those or just filter them out of the console. I’m sure you could write an interceptor but thats basically what this directive is doing for you.

If the files aren’t just images, I’m sure you could tweak that directive to get it to work as well.

Let me know if you need any more help :slight_smile:

Whoa that’s great thank you @DaDanny !

The thing is that I have three cases :

-does the image exists locally
-if not does it on the server

  • if not take a default local image

Does this directive allow for three cases, not just only two (if the image is not loaded then load another one).

Will this directive work for this situation ?

Can you please still suggest a simple way to check if a file exists (whether local or remote )?

Thanks

We can definitely make something work for that, but before we do that, my question is, what do you mean by:

“does the image exist locally”?

When you package an app, you are in charge of what files are included, so you’ll always know what images exist locally in the app.

Or did you mean something else?

Yes but the app updates the database file which refers to a lot of files. So I test every reference in the db file to know whether or not the file is locally avail or remotely only.

If you set ng-src to a function call that checks your 2 locations for the image and returns undefined if you can’t find it, I believe the ng-error-src will take over. If it doesn’t for undefined, give it a bad url you know doesn’t exist so it fires the error.

OK I see but I still have to check the locations in the function, what do you suggest for this ?