Question

I have a page that uses the following to submit a AJAX request:

function oc()
{
  jQuery.get(
    "http://somewhere.com:5001/ajax/options/",
    jQuery('#selectform').serialize(),
    function(data,statusm,xml){
      // I got nothing!!!
      return;
    }
  );
}

If I make the request manual from the address bar, things work. And when I make the request from the JS I can see via logging that the server side is working correctly, but in the call back, I can’t seem to get the contents of the reply.

What am I going wrong?

Answer 1

What you’re likely seeing is the same-origin policy kicking in. This is a browser security feature to prevent cross-site scripting attacks, and accessing even the same domain/host on a different port counts as being on a “different domain” as far as the policy goes. The example table on Wikipedia does an excellent job of showing what is/isn’t allowed.

You can additionally test this by using the --disable-web-security command line switch in Chrome, then your script should work…it’s not a solution, just helps confirm the problem.

In short, you need to make requests to the same domain or host and port, otherwise it’ll be blocked. The exception to this rule is using JSONP, which is used mostly for this purpose. You can find some decent examples here and here.