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

Question

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: '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?

Solution 1

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.

Solution 2

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.

Solution 3

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

Comments

[Chev]

Where do I add that? It is an api that returns only JSON.

[Frédéric Hamidi]

@Alex, JSONP is the way to go, then. document.domain only allows two documents to collaborate.

[Chev]

Ah, okay. Thanks for the help. I already have it working with JSONP which is fine. I was just frustrated that I couldn't get it working when I thought it was supposed to work that way. Thanks again.

[Chev]

Maybe not, but until CORS there wasn't much choice.

[Michael Butler]

The "nice guide" says site was Hacked :(

[ZerOne]

So if I use an iframe and get the content of the iframe with javascript, it should work?

[Michael Hampton]

Sigh... Your nice guide is "Hacked By Ben AttaCkEr".

[contactmatt]

Why does everyone act like JSONP solves anything. Okay, go ahead, try doing a CORS POST with JSONP and see how far that gets ya.