json array available via browser, but fails silently via getJSON

Question

This is my first time here so please bear with me.

I have these two similar web apis, both accessible using browser but only one works with jquery. What gives?

This one is available using browser and using getjson, all good:

$.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=london&appid=33d0ba5efa0edb1a2282c3165b00d15e&units=metric")
.done(function( json ) {
console.log( "JSON Data: " + json.name );
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});

This one below is nearly identical, but only available if you go the address, if you try to get json it fails silently or throws error:

$.getJSON( "http://info.studyinpoland.pl/admin/public/api/events")
.done(function( json ) {
console.log( "JSON Data: " + json[0].id );
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});

Why does this fail? I need the data from http://info.studyinpoland.pl/admin/public/api/events, how else can I access it using javascript?

Answer 1

I found a solution. Download this chrome extension. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=gmail

Answer 2

If you look in your console you will get this error "XMLHttpRequest cannot load http://info.studyinpoland.pl/admin/public/api/events?_=1482151092048. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stackoverflow.com' is therefore not allowed access."

To fix this problem what I did was make my ajax calls from my backend instead of the front-end and it works just fine.

Hope this helps :)