XHR Request on Mobile Safari returns nothing

Question

I'm having an issue with performing an XMLHttpRequest in mobile safari (iOS 8.3).

var ajax_request = function(){

    this.get = function( url, callback ){

        var r = new XMLHttpRequest();


        r.open( 'GET', url, true );
        r.onload = function (data) {
            console.log(data);
            if ( r.status >= 200 && r.status < 400 ) {
                callback(r);
            } else {
                console.log("An error occured");
            }
        };
        r.onerror = function (err, url, lineNumber) {
            console.log("A connection error occured");
            console.log(err);
            console.log(lineNumber);
        };

        r.send();

    }

};

This code is making a request to an asset in Shopify.

In all browsers I have tested, the request works perfectly fine, however in Mobile Safari, I receive a completely empty response.

Shopify returns with the Access-Control-Allow-Origin * header set so I'm doubtful that it's related to CORS but perhaps I'm missing something.

Additionally, this code has been running on a production site for some time and the error has recently begun occurring which makes me think it's either a bug in a safari update or a change in the way Shopify handles AJAX requests.

Any light anyone could shed on this issue would be hugely appreciated.

Desktop Safari: (8.0.6)

Mobile Safari:

Answer 1

I believe the issue was to do with Shopify not accepting requests using regular http - but it seemed to be browser specific.

I fixed the issue by using https for all requests and redirected users to the https version of the site if they tried to access the regular one.

It doesn't explain what was causing the issue, but it's a working solution.