How to make a CORS request with Javascript

0. Introduction

This easy tutorial helps you send a CORS request using Javascript to get data from Carriots. We will use the Carriots Meteorological data from our weather station. See more about the Meteo Weather Station or look at the latest weather data in these Weather Graphs.
In this project you will learn how to:

  • Format and send a CORS request from Javascript
  • Decode the JSON data received from Carritos to get specific values


Music to listen: Joan Baez - A Hard Rain's Gonna Fall


1. Project Schema

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:

  • Schema


2. Create the HTML layout

Using your favorite code editor, enter the following code into an HTML document:

The most important part of this code is the onclick event. It starts the process of calling the CORS request by calling the calculateRequests function. In the Javascript code we will see that the calculateRequests function will call the CORS method specifying different query parameters to get the information we want.


3. Create the CORS request

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.

Open a new Javascript file with the name corsRequestTutorial.js. The Javascript code has four functions. The function called in the onclick event from the HTML document is calculateRequests. This function calculates the current date/time and then calculates the date/time from one day before the current time (and after, it calculates the date/time for one week and one month (30 days) prior). It then calls the makeCorsRequest function and passes the method ('GET'), the URL with the current date/time and the date/time of one day prior and the request we are making (day, week or month). In turn, the function then calls the createCORSRequest function which creates the XHR object. We then add the headers needed for our petition to reach Carriots successfully. When the JSON with the data is returned, we call the decode function to extract the information (the temperature) that we want from the JSON string.

This is the corsRequestTutorial.js Javascript code.

Its time to test our CORS request code using a web navigator.


4. Check the results

Now that you have completed the HTML and Javascript documents it's time to test it out. Go to the folder where you have the HTML document saved and right click on it. Open it using a web browser. You should see something like this.

  • 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