← back to the blog


CORSify your data

Posted in Data, Usage by Admin

To demonstrate the CORS issue, we will look at a simple example where we want to load the www.google.com HTML page and display the HTML in an alert box:

$.get("http://www.google.com",function(result){alert(result);})

This webpage contains that code. Open that page.

If you look at the Javascript error console (F12 in most browsers), you will see that your browser blocked the loading, as www.google.com is not the domain of the webpage (which is quipslab.com) AND www.google.com does not respond with CORS headers.

Firefox gives the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.google.com/. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Now try to open this page, which works.

It uses a CORSified link for www.google.com. QUIPSlab actually opens the page server-side and then sends it to your browser, putting the correct CORS headers whch makes your browser happy.

If you are using older browsers like IE-8, CORS is not fully supported, so the solution is to use JSONP. In this case, replace the $.get by $.getJSON in your Javascript and use the link with end with callback=?.

Enjoy.