How to make an ajax call to another domain?

Question

I am trying to build an interface that communicates with a REST API for attask.com. Their API is convenient because it returns JSON. I thought that was perfect because I could forget about server-side C# code and just write the interface using jQuery and AJAX. However, when I try to make an AJAX request to their API I get an error in Chrome's javascript console:

Origin http://mysite.com is not allowed by Access-Control-Allow-Origin.

What does this mean? Is this the browser preventing the request? If so, why?

Update:

If I don't have any control over the server and it does not respond to JSONP requests, is my only option to employ a server-side REST client and have my AJAX talk to my own domain instead of attempting to go cross-domain?

possible duplicate of [Ways to circumvent the same-origin policy](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) — josh3736, Sep 13 '11 at 22:13

score 1 · Answer 1 · answered Sep 13 '11 at 22:13

1

Alternatively, you can use the fututre standard Cross Origin Resource Sharing that is supported on modern browsers and fallback to JSONP for the other browsers.

answered Sep 13 '11 at 22:13

Rahman Kalfane

1,717
17
17

that is interesting. do you know a lighter good article that explains it? Cheers. – vtortola Sep 13 '11 at 22:33

score 1 · Accepted Answer · answered Sep 13 '11 at 22:18

I found that jQuery-JSONP is the easiest way to do this.
jQuery JSONP is an alternative solution to jQuery's implementation of JSONP

jQuery-JSONP features:

error recovery in case of network failure or ill-formed JSON responses,
precise control over callback naming and how it is transmitted in the URL,
multiple requests with the same callback name running concurrently,
two caching mechanisms (browser-based and page based),
the possibility to manually abort the request just like any other AJAX request,
a timeout mechanism.

Sample Code to Get user profiles from YouTube

function getProfile(userId) {

    $.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);
      }
    });
}

For more samples.

score 0 · Answer 3 · answered Sep 13 '11 at 22:12

0

You'll want to use JSONP, JQuery has nice support for this built in. See JQuery Documentation for more info.

answered Sep 13 '11 at 22:12

Mike K.

3,751
28
41

score -1 · Answer 4 · answered Sep 13 '11 at 22:10

-1

You need to make a JSONP request to perform a cross domain AJAX request, you can do this by appending

callback=?

To the URL you send the request to

answered Sep 13 '11 at 22:10

dougajmcdonald

19,231
12
56
89

Interesting. I tried appending this to my url, but nothing changed. [Screen Shot](http://www.codetunnel.com/content/images/ajaxfail.jpg) – CatDadCode Sep 13 '11 at 22:13
This is a way, way oversimplifed answer. You can't JUST append callback=xxx. You have to first have a cooperating server that will look at the callback parameter and then generate the correct script in response that will call that callback and pass the JSON data to it. Then, you have to use ` – jfriend00 Sep 13 '11 at 22:15
@jfriend00, that makes more sense. Thank you. – CatDadCode Sep 13 '11 at 22:18
@jfriend00 the OP had already mentioned that one of their options was to use jQuery for client side JSON requests, so with that in mind they would be able to use the jQuery ajax wrapper methods such as getJSON and use the answer I added to insist upon a JSONP response as per the jQuery documentation – dougajmcdonald Sep 14 '11 at 06:04
Sure, they can use jQuery to help, but 1) you don't mention that and 2) there's still a host-side of this problem. Your answer simply makes it sound like all you do is tack a parameter onto the end of your ajax call and you're done. There's significantly more to it than that and you don't describe any of that. – jfriend00 Sep 14 '11 at 06:28
My answer was purely providing an (albeit brief) solution to the problem of the making an "ajax request to the their api" and "getting the error in chrome console" which the OP described, point taken that there's more to it than what I'd added but I had assumed that the making an ajax request side of things was covered from the original description, if that was the case, then to get around the problem described, it could quite feasibly just need flipping to JSON which the callback param would facilitate. – dougajmcdonald Sep 14 '11 at 07:50

How to make an ajax call to another domain?

Update:

4 Answers4