jquery – How to get a JSON object from an external url/domain?

Question:

I found a Lottery API that brings me the result data of a Lotofácil draw, but I am not able to access the JSON object data.

I'm trying like this:

$(document).ready(function(){
    $.get( "http://developers.agenciaideias.com.br/loterias/lotofacil/json", function( data ) {
      $( ".result" ).html( data );
      alert( "Load was performed." );
    });
}); 

But the browser console shows me this error:

XMLHttpRequest cannot load http://developers.agenciaideias.com.br/loterias/lotofacil/json . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://fiddle.jshell.net ' is therefore not allowed access.

When I access the URL directly, I download the JSON file normally, so I would like to know what this error is about and how to make the right call to receive this data.

Answer:

This answer says that JavaScript code is limited by the same-origin policy .

That is, what you are trying to do (get content from another domain via JavaScript) is blocked by the browser.

Also according to the same answer, for this type of access to be possible you would need a configuration in the destination domain ( developers.agenciaideias.com.br ).

That is: you will not be able to get this content from JavaScript running in the browser. You will have to get it from the server side of your application and return to your user a ready page with the content.