cross domain request in Xhtml

Question

I'm trying to send a https request from a HbbTV-Application (xhtml) to get information from https://www.meethue.com/api/nupnp.

XMLHttpRequest was my first option, but due to same origin policy it obviously won't work. As an alternative i found CORS, but as I understand it it needs XMLHttpRequest2, which is part of HTML5, am I correct?

Is there any function, method or workaround I could use to achieve my goal?

Best regards Adrian

Answer 1

XMLHttpRequest was my first option, but due to same origin policy it obviously won't work.

I don't get it.

From here on stackOverflow I have no trouble running an XHR on the endpoint you provided, using the following snippet :

function fetchData() {
  var URL = 'https://www.meethue.com/api/nupnp';
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        document.getElementById('response')
          .innerHTML = "Response: " + xhr.responseText
      }
  }
  xhr.open('GET', URL)
  xhr.send()
}

<div id='response' onclick='fetchData()'>Click to fetch</div>

CORS (cross-origin resource sharing) is more a specification than a technology in itself.

It defines that cross-origin request should be allowed only if the destination endpoint specifies that the origin is allowed to fetch there. If you wish to learn more about it, I recommend this excellent article on MDN : HTTP Access Control (CORS)

Also, if your platform supports it or you can polyfill it, I recommend you use Fetch instead of XHR.