Jquery's "GetJson" function is not working for URLs on mobile

I'm trying to have Jquery get JSON from a URL on mobile devices, but it just does not want to do it and I don't know why.

The code ran runs perfectly fine on desktop, and works with local files on both platforms, but not for URLs on mobile.

Here is the code that I attempt to ran:

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <p id="test">test</p>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> 
    <script>
        $.getJSON("https://support.oneskyapp.com/hc/en-us/article_attachments/202761627/example_1.json", function(json){
            console.log(json.lowest_price);
            document.getElementById("test").innerHTML = json.fruit;
        })
    </script>
</html>

The following is the JSON code the URL is supposed to send back upon the request:

{
    "fruit": "Apple",
    "size": "Large",
    "color": "Red"
}

If anyone can help support me with this it would be great. Thank you.