6

I'm trying to make a simple JSON get request to an API on a domain that I do not control.

My code is simply:

$(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: 'http://pubapi.cryptsy.com/api.php?method=marketdatav2',
            success: function (data) {
                console.log(data);
            }
        });
});

But since that is a cross-domain request, I am getting this error in the Chrome Console:

XMLHttpRequest cannot load http://pubapi.cryptsy.com/api.php?method=marketdatav2. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

And when I try to add the parameter dataType: 'jsonp' the Console returns with this error:

Uncaught SyntaxError: Unexpected token :

But when I examine the Network tab in Chrome I see that under Headers the Status Code is 200 OK and I can actually see the full response in the Response tab, but the console is still showing the "Unexpected Token :" error and the JQuery JSON request is still failing.

Here's the JS Fiddle link: http://jsfiddle.net/6Qcq2/ You can see the same results

I have tried running the url on http://www.hurl.it and it shows me Status OK and the response as well, so I must be doing something wrong.

I've pretty much wasted the whole day trying to figure out how to get around this problem.

Your help is very much appreciated.

Shant H.
  • 63
  • 1
  • 1
  • 10

4 Answers4

9

The response from the API is JSON, not JSONP, so just changing the data type doesn't help.

You can use a proxy that makes the request and turns the JSON into JSONP:

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'http://jsonp.guffa.com/Proxy.ashx?url=pubapi.cryptsy.com%2fapi.php%3fmethod=marketdatav2',
        dataType: 'jsonp',
        success: function (data) {
            console.log(data);
        }
    });
});

Demo: http://jsfiddle.net/6Qcq2/1/

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • http://jsonp.guffa.com/ is a cool webservice. Thanks for making it and sharing your knowledge. – KyleMit Feb 02 '14 at 02:23
  • 1
    Also, it's worth noting, as you do on your webpage, that you have to encode the URI. I think it looks a little cleaner to build the URL using `encodeURIComponent()`. See this [**fiddle**](http://jsfiddle.net/KyleMit/6Qcq2/3/) – KyleMit Feb 02 '14 at 02:30
  • Wonderful! Thank you Guffa and KyleMit – Shant H. Feb 02 '14 at 04:32
  • is it possible to do post where the payload is json {key : "value"} ? – Diaa Saada Aug 27 '15 at 08:06
1

You need to setup some type of proxy script. Due to the Same-origin policy, you can't make an ajax call to a resource that is on an external domain. You can get around this by setting up a simple PHP script that will query the data for you. Then, you would point your ajax call to your script (which will be hosted on your domain). The content type for that resource is application/json, so telling jQuery the type is jsonp won't help you.

Eddie Flores
  • 1,093
  • 13
  • 14
  • 1
    Actually [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) is a method for allowing cross domain calls, it's the [same origin policy](http://en.wikipedia.org/wiki/Same-origin_policy) that prohibits it by default. – Guffa Oct 20 '14 at 10:43
0

AJAX requests do not work cross-domain for security reasons. Since you're reading JSON data, you may be able to make JSONP work.

helion3
  • 34,737
  • 15
  • 57
  • 100
  • 1
    `I try to add the parameter dataType: 'jsonp' the Console returns with this error` – KyleMit Feb 02 '14 at 01:57
  • 1
    It's from his original post. I was pointing out that he already tried jsonp. – KyleMit Feb 02 '14 at 02:02
  • He didn't mention the callback method etc so I figured a link could help resolve his understanding of jsonp. Though I failed to recognize that you were pointing out part of his question to me, my bad. – helion3 Feb 02 '14 at 02:08
  • `getJSON()` (which you linked to) is a shorthand for `$.ajax`. (which he's using. For .ajax, you can specify the datatype as `jsonp`; for .getJSON() you have to use the `callback=?` you linked to, but they both do the same thing. – KyleMit Feb 02 '14 at 02:13
0

Shouldn't the jsonp response direct to a callback?

What is JSONP all about?

Community
  • 1
  • 1
reergymerej
  • 2,371
  • 2
  • 26
  • 32