Question

I have the following code snippet:

    $.getJSON("http://localhost:8080/images",
  function(data) {

    var items = [];

    $.each(data, function(key, val){
        items.push('<li id="' + key + '">' + val + '</li>');
    });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');

  });

The url returns json that looks like {"count" : 0}. When I try to load the page in my browser the .getJSON call fails. However when I save the result from “http://localhost:8080/images” to a file and try to load it with the same Javascript (url replaced by file name) everything works as expected and I get a list.

Any pointers?

Answer 1

You’re probably running into the Same Origin Policy. In the normal course of things, you can only use “ajax” (that is, a genuine XMLHttpRequest call) to retrieve resources from the same origin as the document your script is running in. Origin includes domain, port, and protocol. Your loading it from the local file should only work if the document itself is loading from a local file (not an http URL). See the link for details.