Building JS buttons getting currentValue

🚧 Developers
1

Hi everybody, I need help, I'm stuck.

I am trying to build my own JS set of buttons on a local webserver. I have successfuly used urls from Maker API app to toggle some lights.

However, I aslo want to update devices' currentValue and when I use the Maker API url, either through post() or get() methods I simply can't get any data back into, let's say, for example, a textarea, not even into a string.

I know the data is returned as JSON so I have tried
var myVar = JSON.parse(this.responseText); in the js onreadyStateChange function.

I have verified that the URL returns the JSON text in a browser. What I want, is "extract" the "currentValue" key and value so as to get my html button (or a textarea in the case of the code below) to display this value. The main issue, I think, is the CORS error I get. But, even using POST() method (see second code example below) with "Access-Control-Allow-Origin: http://HUB_IP:80" in the headers, I get the following error code:
"Access to XMLHttpRequest at 'http://192.168.10.70/apps/api/1348/devices/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Here is what I have tried so far:

<script>
function myFunction()
// GET METHOD
 url = "http://192.168.10.70/apps/api/1348/devices/1956?access_token=xxxxxxxxxxxxxxxxxxx";   

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("myTextArea").innerHTML = myObj.name;
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

</script>
/// POST() METHOD
url = "http://192.168.10.70/apps/api/1348/devices/1956?access_token=XXXXXXXXXXXXXXXXXXX";   
  var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("myTextArea").innerHTML = this.responseText;
      }
    };
    xhttp.open("POST", url, true);
    xhttp.setRequestHeader(
      "Content-type","application/x-www-form-urlencoded",
      "charset=UTF-8",
      "Origin http://192.168.xx.xx", // Hub ip... not sure this is what I should put here. Com is from a local computer to the hub... 
      "Access-Control-Allow-Origin: http://192.168.10.70:80", /// no idea what I should do about this one... this is the cause for the CORS error I get... 
      "access_token: XXXXXXXXXXXXXXXXXXXXXXX",
      );

    xhttp.send();

If anyone has an example of a working html/js button with status update, I'd be very grateful. Otherwise, maybe you can tell me what I'm doing wrong or pointing me in the right direction.

Thank you.

3

Never mind... I figured it out! Could not delete the topic though so sorry for the waste of time.

4

For those such as myself who were left wondering, the answer is that there's an "Allowed Hosts (for CORS)" section in the Maker API app. Add your server to the list like this:

image

And you're good.

1 Like