bulldoglowell

Q: Website not able to make Ajax call

I'm  complete novice regarding website development, but I am having a problem that it solution has alluded me for a while. This is a local phenomenon, I am building a webpage that is only accessible from inside my network.

 

I have created an HTML webpage (using Mac Server and the the default location) that uses JavaScript to access servers:

 

1) on the internet (this bit works) and

2) on a reverse proxy server (hosted on port 8080 on same Mac server)

 

The proxy allows for calls to my local home automation server (which has no CORS support).  I am forwarding all traffic to my Mac server that comes to 10.0.1.15 @ 8080 to the server located at 10.0.1.25:3480 setting up reverse-proxy (Node.js library):

 

mymacbook$ reverse-proxy - h 10.0.1.15 -p 8080 -t 10.0.1.25:3480

 

The proxy returns a JSON from the server, and that works.  So, I can make a call to the server like this:

 

http://10.0.1.16:8080/data_request?id=status&output_format=json&DeviceNum=3

 

from any browser on the network, including the Mac server, and get a JSON return... it is perfect, and each device that registers an event in the reverse-proxy terminal window log.

 

So, I feel like the proxy is set up correctly and making calls from any device well, works.

 

Here is my issue:

 

When I load the webpage from any device, including the Mac server, it registers a call on the terminal log, but the webpage gets no data back.  However... when I load the webpage by right clicking on the file, selecting Safari and loading it from the default location on the Mac server, it successfully makes the Ajax call to the HA server and well, it works!

 

So, I am confounded to understand what the heck is happening here (i.i. what have I done wrong or what don't I understand about website hosting on my Mac server).

 

Here is my JavaScript in the webpage.  Note that the internet .jquery $getJSON() calls work, the local network calls do not!

 

setInterval(function() {
    var requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/?access_token=" + accessToken;
    $.getJSON(requestURL, function(json) {
        document.getElementById("range").innerHTML = json.result + "%";
        document.getElementById("myRange").value = json.result;
    });
    var myURL = "https://api.spark.io/v1/devices/" + phoneyID + "/" + phoneyVariable + "/?access_token=" + accessToken;
    $.getJSON(myURL, function(data) {
        var state = (parseInt(data.result) == 1)
        if (state) {
            $('#phoneyRadio1').attr('checked', false);
            $('#phoneyRadio2').attr('checked', true);
        } else {
            $('#phoneyRadio2').attr('checked', false);
            $('#phoneyRadio1').attr('checked', true);
        }
    });
    getMainThermostatData();
    getGuestThermostatData();
}, 5000);

 

The other of the two functions in the closure is similar to this one:

 

function getMainThermostatData(){
  $.getJSON("http://10.0.1.16:8080/data_request?id=status&output_format=json&DeviceNum=3", function(data) {
      var found = data.Device_Num_3.states.filter(function(item) {
          return item.variable === 'CurrentSetpoint';
      });
      var currentTemp = found[0].value;
      document.getElementById("mainSetpoint").innerHTML = currentTemp;
      var found = data.Device_Num_3.states.filter(function(item) {
          return item.variable === 'CurrentTemperature';
      });
      var currentTemp = found[0].value;
      document.getElementById("mainActual").innerHTML = currentTemp;
  });
}

 

 

Could anyone provide some direction as to what to look at here.

 

One other thing to note is that while the Mac Server is set up as server.local however I cannot reach my server that way, I must put the IP address into the browser (e.g. 10.0.1.16).

 

Any assistance would be appreciated!

Mac mini, iOS 9.3.3, Mac Server

Posted on Jul 30, 2016 10:05 AM