Cross-subdomain ajax request denied even when document.domain is set correctly

In my application I have a website on one sub-domain (dev.u413.com) and I use jQuery to make an ajax request to a JSON api on another sub-domain (api.u413.com). When I inspect the requests in Chrome dev tools and Firefox Firebug it appears my requests are being prevented by the Access-Control-Allowed-Origin. I set document.domain to a suffix of the current domain: document.domain = 'u413.com';.

Here is my request:

    $.ajax({
        dataType: 'json',
        data: { parseAsHtml: true, cli: 'help' },
        url: '开发者_StackOverflow社区http://api.u413.com/',
        success: function (response) {
            alert(response.Command);
        }
    });

If I modify the ajax request to be on the same domain then the request is successful.

    $.ajax({
        dataType: 'json',
        crossDomain: false,
        data: { parseAsHtml: true, cli: 'help' },
        url: 'http://dev.u413.com/',
        success: function (response) {
            alert(response.Command);
        }
    });

Why does this happen? The browser shouldn't complain about cross-domain problems since I set document.domain to a common suffix of both sub-domains as per the guidelines on the same origin policy.

I have the app working with jsonp currently but I feel like proper ajax requests should be working as per the same origin policy I linked above. I'd rather not use jsonp if I don't have to. Is it not possible to make regular ajax requests across sub-domains?

---

document.domain doesn't work with AJAX. It is intended for cross domain iframe and window communication. In your case you are violating the same origin policy (last line of the table) so you need to use either JSONP or server side bridge.

Here's a very nice guide which illustrates different techniques for achieving cross domain AJAX requests.

---

the same origin policy is one of the most frustrating browser related topics I have had to deal with. Silly to me that 2 servers on the same domain can not communicate. Unfortunately the same origin policy considers even 2 requests to the same server but on a different port a violation of the same origin policy. I think this will get better with future browsers:

http://www.html5rocks.com/en/tutorials/file/xhr2/

search for : Cross Origin Resource Sharing (CORS)

basically your server just has to set a response header saying "yeah it is ok to allow cross domain or cross subdomain calls to server xyz".

It will be some time before all browsers support this Im sure (and hell I have to support ie8 till most our users are off it anyway) - but at least there is light at the end of the tunnel.

---

You need to add document.domain = 'u413.com to your other sub domain aswell.

---

Is it not possible to make regular ajax requests across sub-domains?

This is not technically AJAX, but you can mimic an AJAX request with a form submission successfully going cross-domain. The downside is you can't access the response and this will cause the page to be redirected to the form's ACTION URL.

Instead of this:

jQuery.post('https://www.com',
    'offerCode':523153,
    'accountNumber':'',
    '_item.x':'42',
    '_item.y':'21'
});

Use this:

jQuery('<form action="https://www.com" method="POST">
      <input type="text" name="offerCode" value="523153">
      <input type="text" name="accountNumber" value="">
      <input type="text" name="_item.x" value="42">
      <input type="text" name="_item.y" value="21">
    </form>').trigger('submit');