I have an IoT device with an HTTP API – I am building a very simple HTML + JS interface with no server component.
Using a simple XMLHttpRequest I am able to make calls to the API however I am hitting an issue with CORS; all calls to the API respond with a 200, and take the proper action on the IoT device; the calls return the proper values according to the network inspection tab however no data is returned to the callback.
Given two functions:
// Helper API Request Method
function call(host, cmd, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function(data) { console.log(data); };
xhr.open("GET", "http://" + host + "/httpapi.asp?command=" + cmd);
xhr.send();
}
// Set output volume level (0->100)
function a_vol(master, vol) {
call(master, "setPlayerCmd:vol:" + vol);
}
When I call the function in the JS console, I don’t have access to the returned object:
a_vol("10.3.106.120", 80);
undefined
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://10.3.106.120/httpapi.asp?command=setPlayerCmd:mute:0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Given that I can not edit the firmware of the device to include the CORS headers, and that the device still responds as expected to the API commands, what can I do to avoid this error message and access the returned object?