javascript - 有没有办法从子域加载 json？

Question

我喜欢将一些 .json 文件存储在 CDN 上，例如 static.mydomain.com。说实话，static.mydomain.com 是 Amazon S3 存储桶前面的 CNAME。

我知道这违反了 JavaScript 安全模型。是否有建议的解决方法或设计？我已经看到服务器端的东西建议像 PHP 脚本通过 cURL 或 file_gets_contents() 吸收数据，但这是一种非常蹩脚的方法。有没有什么方法可以从外部服务器加载 JSON 而不会太麻烦？

===

更新:这是让我相信这是子域的跨域问题的思路。

当我在 Chrome 中访问一个页面(例如 static.mydomain.com/json/file.json)时，它显示为纯文本。当我在 Firefox 中访问该页面时，它会尝试让我将 .json 保存为下载。

我在 Firebug 中看到一个奇怪的结果:没有响应正文的 200 响应。

我无法通过浏览器记录直接 header ；在强制下载之前，我的 Firefox HTTP header 插件不会记录任何内容。然而，这里是通过这个 jQuery 片段加载时的标题(值得注意的是，下面的警报不会触发):

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

响应头

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

请求 header

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

虽然 header 在我看来没问题，但没有响应正文 get、post 或我可以通过 jQuery 抛出的任何其他内容。将内容类型设置为 application/json、text/javascript 和 text/plain 时，我看到了相同的结果。

谁能解释这种行为？我想我一定是在 S3 端做错了什么，但这可能是 JavaScript 中的跨域问题，还是我可以排除跨子域问题？

Answer 1

使用 jQuery.getJSON 而不是 .get。 .get 使用 XHR，跨域(甚至子域)不友好。 getJSON 使用一个可以工作的 JSONP 请求。

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

不过，您需要为 JSONP 响应修改 JSON 数据。它需要一个定义回调的参数。 jQuery 创建一个随机函数作为回调，因此如果您的全部目的是将其用作 CDN，则您无法在响应中动态更改回调名称。

您可以通过将正确的参数传递给 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.

那么你的回复应该是这样的:

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