CODEWITHSUNDEEP
jqueryajaxjsonp
hookedonwinter
hookedonwinter

Reputation: 12666

jQuery ajax and getJSON requests hitting access-control-allow-origin issues

I'm attempting to grab a file from a different server using jquery's $.ajax or $.getJSON, but I'm hitting the access-control-allow-origin wall, and the jsonp options don't seem to work for me.

The site is using jQuery 1.5.1.

Here are my three tests:

Using basic $.ajax, the url requested never has ?callback=? appended:

$.ajax({
    url: url,
    datatype: 'jsonp',
    error: function(){console.log('error');},
    success: function(){console.log('success');}
});

Using basic $.ajax with an attempted hack, still get cross-site issues:

$.ajax({
    url: url + '.jsonp?callback=?',
    datatype: 'jsonp',
    error: function(){console.log('error');},
    success: function(){console.log('success');}
});

Using $.getJSON, beats the cross site issues, but the error case is never triggered:

$.getJSON(url + '?callback=?',
    function(data){
        console.log('success');
    })
    .error(function(){
        console.log('error');
    })
    .success(function(){
        console.log('success!');
    });

Anyone see what I'm doing wrong? In the end, I'm trying to test to see if the url exists, and do something on error if it doesn't.

Edit: The url I'm attempting to access does not exist. I'm expecting the error case to be triggered.

Upvotes: 2

Views: 15516

Answers (4)

user3738431
user3738431

Reputation:

you used datatype but you should use dataType.

Upvotes: 0

Daria Trainor
Daria Trainor

Reputation: 5575

You can use jQuery-JSONP. This script allows you to catch errors (although without any meaningful error message).

   $.jsonp({
      "url": "http://gdata.youtube.com/feeds/api/users/"+userId+"?callback=?",
      "data": {
          "alt": "json-in-script"
      },
      "success": function(userProfile) {
          // handle user profile here 
      },
      "error": function(d,msg) {
          alert("Could not find user "+userId);
      }
    });

Is is supported by major browsers:

  • Internet Explorer 6+
  • Firefox 2+
  • Chrome 1+
  • Safari 3+
  • Opera 9+

Upvotes: 1

Sascha
Sascha

Reputation: 957

you have to specify a timeout:

$.ajax({
    dataType: "jsonp",
    url : url,
    timeout : 1000
})
    .done(function(data) {logdata(data); })
    .fail(function() { logdata("error"); });

Upvotes: 0

Mo Valipour
Mo Valipour

Reputation: 13496

In order to be able to access an external resource from javascript. The remote resource MUST include access-control-allow-origin in the response header. If you have control over that resource, you need to add this response header to * (or your domain if you want a more restricted access control).

Read more about this here: http://enable-cors.org/

If you do not control that external resource. Solutions are more tricky. Some people take use of YUI to do cross-domain ajax calls. See here: http://jpvalappil.wordpress.com/2010/01/04/cross-domain-ajax-the-yui-way/.

If you are writing a chrome-extension, the API allows you to grant permissions to your extension to access resources of other domains from js.

Upvotes: 3

Related Questions