Is there any way to load json from a subdomain?

Question

I'd love to stash some .json files on a CDN a la static.mydomain.com. Truth be told, static.mydomain.com is a CNAME in front of an Amazon S3 bucket.

I understand this violates the JavaScript security model. Is there an advised workaround or design? I've seen server-side stuff suggested like a PHP script to suck down data via cURL or file_gets_contents(), but that's a pretty lame approach. Is there any way to load JSON from a foreign server without getting too hacky?

===

UPDATE: Here's the line of thought that led me to believe it's a crossdomain issue for subdomains.

When I visit a page (e.g. static.mydomain.com/json/file.json) in Chrome, it displays as it would plaintext. When I visit the page in Firefox, it tries to get me to save the .json as a download.

I see a peculiar result in Firebug: A 200 response with no response body.

I can't log the direct headers via browser; my Firefox HTTP header plugin doesn't log anything before the download is forced. However here are the headers when loaded via this jQuery snippit (worth noting, the alert below doesn't fire):

jQuery.get("https://static.mydomain.com/json/file.json",
   function(data){
     alert("Data: " + data);
   }
);

Response Headers

x-amz-id-2 wSVtjlvFj5ffOtg7ZbKqKw8PexqlzJic7+PxSk975/FcDUnshSV2CiUP2oPWR8yK
x-amz-request-id 8AD81565A783988D
Date Tue, 19 Oct 2010 00:07:22 GMT
Expires Sat, 17 Oct 2015 22:25:37 GMT
Last-Modified Mon, 18 Oct 2010 01:08:13 GMT
Etag "2f1c7adcc1a7b0fd8fc8ce1478e0bf81"
Content-Type application/json
Content-Length 85966
Server AmazonS3

Request Headers

Host static.mydomain.com
User-Agent Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Accept application/json, text/javascript, */*; q=0.01
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Connection keep-alive
Referer http://mydomain.com/directory/referrer.html
Origin http://mydomain.com

Though the headers seem to me to be fine, there is no response body to either a get, post, or anything else I can throw at this via jQuery. I see the same result when setting the content type to application/json, text/javascript and text/plain.

Can anyone explain this behavior? I figure I must be doing something wrong on the S3 side, but could it be crossdomain issues in JavaScript or can I rule out cross-subdomain issues?

Answer 1

You can either use JSONP or use an absolute path to the subdomain (this assumes the subdomain is on the same server, which it must be). That is, instead of https: blah blah, you would use /home/path_to_subdomain/ etc. and it should work.

JSONP is a good solution too, but it may be overkill if you can just provide an absolute path the subdomain.

Answer 2

Use jQuery.getJSON instead of .get. .get uses an XHR, which is not friendly across domains (even subdomains). getJSON uses a JSONP request which will work.

http://api.jquery.com/jQuery.getJSON/

You'll need to modify the JSON data for a JSONP response though. It takes a parameter that defines a callback. jQuery creates a random function to serve as the callback, so if your whole point is to use this as a CDN, you don't be able to dynamically change the callback name in the response.

You can use a static callback by passing the right parameters to jQuery.ajax: http://api.jquery.com/jQuery.ajax/

dataType: 'json' //(.getJSON is just a shorthand for .ajax with this paraeter set)
jsonpCallback: 'myStaticCallbackName' // Lets the client know what callback to expect from the server.

Then your response should look like:

myStaticCallbackName({"foo": "bar"});