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 as though the requests are acting like jsonp. They do not appear in the XHR section with normal ajax requests. I did not specify jsonp and 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);
}
});
Dev tools does record this request but the results are odd. Firstly, there is no response. None. If you click the request and click the response tab in dev tools it simply says “The request has no data available.” Also, when using jquery jsonp normally it automatically appends the request with a query string variable callback=blahblah, but that is not happening here either.
It’s almost as if jquery is detecting that the domain is different and changing the way it makes ajax requests. If I modify the ajax request to be on the same domain then the request appears in the XHR tab where it belongs.
$ .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. The browser isn’t complaining about anything and the console remains free of errors, but I don’t think these requests are being made correctly by jQuery.
Any help is much appreciated.
