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