corsxhtmlxmlhttprequest-level2hbbtv

cross domain request in Xhtml


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


Solution

  • 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.