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.

you could try set the ```dataType: 'jsonp'``` you will also have to use a callback function -- see here http://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp — Paul Fitzgerald, Apr 25 '15 at 07:59

jfriend00 · Accepted Answer · 2015-04-25T08:06:56.230

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().

Thank you for the in-depth answer. I was afraid of that. The documentation for the request made a jsonp request, however that was causing issues with the 500 server error (which happened when I tried to make a request with an invalid parameter ~ error handling and such). In the end, I ended up using Quandl, but at least now I'm at a full understanding of why. Hopefully this helps out some others. Thank you. :) — BxtchCraft, Apr 25 '15 at 11:42

score 0 · Answer 2 · answered Apr 25 '15 at 07:56

0

This message is being seen because the server is not allowing Cross-Origin resources via Ajax. So either get the server administrator to enable cors for you or try using JSONP if this is supported by the server.

http://enable-cors.org/server.html

answered Apr 25 '15 at 07:56

ne1410s

6,864
6
55
61

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

2 Answers2