I am trying to get an eventstream in a webpage using the javascript API, however, I am getting errors which I cannot seem to solve. I have the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Temperature and Humidity</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/particle-api-js/5/particle.min.js"></script>
<script type="text/javascript">
function init() {
var particle = new Particle();
particle.login({username: 'XXXXXXX', password: 'XXXXXXXX'});
particle.getEventStream({ deviceId: 'mine', auth: 'XXXXXXXXXX' }).then(function(stream) {
stream.on('event', function(data) {
console.log("Event: " + JSON.stringify(data));
});
});
}
</script>
</head>
<body onload="init()">
</body>
</html>
When I run this, I get the following errors in the console:
Refused to set unsafe header "User-Agent"Request.end @ particle.min.js:502(anonymous function) @ particle.min.js:6P @ particle.min.js:290_createClass.value @ particle.min.js:6_createClass.value @ particle.min.js:6init @ (index):18onload @ (index):32
Fetch API cannot load https://api.particle.io/v1/devices/events. Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.
particle.min.js:290 Unhandled promise rejection Object {error: TypeError: Failed to fetch
at TypeError (native), errorDescription: “Network error from https://api.particle.io/v1/devices/events”}(anonymous function) @ particle.min.js:290
particle.min.js:290 Unhandled promise rejection Object {error: TypeError: Failed to fetch
at TypeError (native), errorDescription: “Network error from https://api.particle.io/v1/devices/events”}
Why am I getting these errors? When I put the same code in a JS file and run from node/command line, It works perfectly.