- 0. Introduction
- 1. Project Schema
- 2. Create the HTML layout
- 3. Create the CORS request
- 4. Check the results
In this project you will learn how to:
- Decode the JSON data received from Carritos to get specific values
Music to listen: Joan Baez - A Hard Rain's Gonna Fall
CORS (Cross-Origin Resource Sharing) allows cross-domain communication from the web browser. It constructs its code on top of the XML HttpRequest object. By adding extra response headers, CORS enables requests that normally wouldn't be allowed between sites because of same origin policy.
Here is the overall diagram of how CORS works with Carriots:
Using your favorite code editor, enter the following code into an HTML document:
In this example, we create three CORS 'GET' requests that will give us all the data streams registered in the Carriots Meteorological device for the parameters that we send. We will send two URL parameters, at_from and at_to. The first will specify the time of the first stream we want and the second the time of the last stream we want (now). The data will be returned in JSON format.
We will use the apikey and device of the Carriots Meteorological station
- Device ID developer: madrid@carriotsMeteo.carriotsMeteo
- Read-only apikey: a3dd2a33c514de9ed0ad1e8e751a82a8c699916858b1ad0a6e2425d71cce48ea
When you make pages using your own data, be sure to change these values for your own. They can be found in your Carriots Control Panel.
Its time to test our CORS request code using a web navigator.
- HTML CORS Test
Now click the 'Get Data' button. If you've done everything correctly, the input boxes will fill with values. This means that your CORS request has retrieved the data correctly. It should look like this.
- CORS Result