If you are creating a web page that needs to display weather data using client side code such as JavaScript, you may find that your browser blocks the request to the Weather API.
Today we discuss how the Timeline Weather API makes solving this easy and painless. How? Because the API supports reading the weather data directly into a browser client-side script using CORS-based cross domain requests .
If you don’t choose a Weather API that permits cross domain requests, direct client requests will be blocked. In that case, you will need to introduce additional complexity such as proxy servers or server side rendering.
What is CORS?
CORS (Cross-Origin Resource Sharing) is a technique web sites use to retrieve the content from multiple server domains. For example, a web site A serves up web pages from the web site address https://domainA.com/. This address is placed in the user browser and the web page content such as HTML, JavaScript and images tends to be loaded from that same web server domain (domainA).
However if the page wants to retrieve data from another domain, such as retrieving data from a weather API, the browser will typically block that request on security grounds. This is using a rule referred to as the ‘same-origin policy‘ which indicates that the browsers should not allow script from one domain to load data from another domain unless certain security protocols exist.
This can be solved using CORS where the second domain (in our case the domain hosting the weather API), explicitly allows cross domain data requests.
The Timeline Weather API makes CORS requests easy
Developers may understand the details of CORS requests (if you don’t, take a read through the comprehensive information here). For example, consider this XMLHttpRequest which uses a simple weather forecast Timeline Weather API request:
var uri=" https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/London,UK?key=YOUR_API_KEY";
function requestXMLHttpRequest() { var xhr = new XMLHttpRequest(); xhr.responseType = "json"; //1 xhr.open('GET', uri);
xhr.send();
xhr.onload = function() { if (xhr.status != 200) { //2 console.log("XMLHttpRequest error: "+xhr.status); return; } processWeatherData(xhr.response); //3
};
xhr.onerror = function() { //4 console.log("XMLHttpRequest Request failed"); };
}
This request would be blocked by the browser if the Weather API did not include CORS headers in the responses. These headers indicate to the browser that the content is suitable for being loaded.
The Visual Crossing Weather API already supports the necessary headers so that you don’t need to worry – you can place your Weather API request directly into client side code such as JavaScript and retrieve the data from there.
As you can see, retrieving data from a weather API in a different domain is easy if your weather API provider already includes the supports CORS – no work is necessary on your side at all!
Questions or need help?
If you have a question or need help, please post on our actively monitored forum for the fastest replies. You can also contact us via our support site or drop us an email at support@visualcrossing.com.