No 'Access-Control-Allow-Origin' header on $.getJSON request

Question

I am trying to make a simple $.getJSON request to the following URL: http://dev.markitondemand.com/Api/v2/InteractiveChart/json?parameters=%7B%22Normalized%22%3Afalse%2C%22NumberOfDays%22%3A7%2C%22DataPeriod%22%3A%22Day%22%2C%22Elements%22%3A%5B%7B%22Symbol%22%3A%22NUS%22%2C%22Type%22%3A%22price%22%2C%22Params%22%3A%5B%22c%22%5D%7D%5D%7D

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1337' is therefore not allowed access.

My code is pretty straightforward:

 var ticker = "CRR";
 var url = "http://dev.markitondemand.com/Api/v2/InteractiveChart/json?parameters=%7B%22Normalized%22%3Afalse%2C%22NumberOfDays%22%3A7%2C%22DataPeriod%22%3A%22Day%22%2C%22Elements%22%3A%5B%7B%22Symbol%22%3A%22" + ticker + "%22%2C%22Type%22%3A%22price%22%2C%22Params%22%3A%5B%22c%22%5D%7D%5D%7D";

 $.getJSON(url, function(data) {
     console.log(data);
 }).success(function() {
     $('#show-data').html("Successfully retrieved data.");
 }).error(function() {
     $('#show-data').html("Service Unavailable.");
 });

It's not running any error or success functions, and I'm getting the same thing when I try $.ajax instead. As far as my setup goes, I'm experimenting with a MEN project, so Mongo, Express, and Node.js on my localhost. Any help would be appreciated.

Solution

You are apparently attempting a cross-origin Ajax request. That means you're trying to contact a server on a different domain/port than the one that the originating webpage is on. This is called a cross origin request and is not permitted by default. You can read about a browser's same origin security policy here.

In order to be allowed to make a cross origin request directly, the server that you are making the request to must specifically allow it.

The Access-Control-Allow-Origin header is one way that it would allow this type of access, but it is apparently not applying that header and thus the request is being denied by the browser. You can read about how CORS (cross origin resource sharing) works here.

Other ways to make cross origin requests are using JSONP (also requires cooperation from the destination server to support a JSONP request) or via a proxy (another server that you are allowed to contact that can make the request to the desired server for you and return you the results). The proxy requires your own server code on a server you do have permission to reach, but does not require cooperation from the target server.

Per the doc on this page, it appears that Markit On Demand does support JSONP so you could use that form for the cross origin request. jQuery's ajax supports that format if you set the appropriate dataType: "jsonp" option for $.ajax().