为什么这种跨域请求解决方法有效？答案

【问题标题】：Why does this cross-domain request workaround work?为什么这种跨域请求解决方法有效？
【发布时间】：2012-05-16 03:59:44
【问题描述】：

在this John Resig article 中，他正在使用 javascript 处理字典大小的单词列表，并通过 ajax 从 CDN 加载内容。

加载的单词是用换行符分隔单词的。然后他说跨域失败：

但有一个问题：我们无法从 CDN 加载字典！由于 CDN 位于另一个服务器（或另一个子域，就像这里的情况一样）我们受制于浏览器的跨域禁止此类请求的政策。一切都没有丢失—— 通过对字典文件进行简单的调整，我们可以将其加载到域。

首先，我们将字典文件中的所有结束行替换为空格。其次，我们用 JSONP 语句包装整行。因此最终结果看起来像这样：

dictLoaded('aah aahed aahing aahs aal... zyzzyvas zzz');

这允许我们对文件进行 Ajax 请求并让它像会期望它 - 同时仍然受益于所有缓存和由浏览器提供的压缩。

所以，如果我没看错的话，只需在原始内容周围添加他的方法 dictLoaded('original content') 即可导致 ajax 请求不会失败。

真的只需要这样（把它变成一个函数+参数）吗？ JSONP为什么能解决跨域访问限制问题？

【问题讨论】：

标签： javascript ajax cross-domain jsonp

【解决方案1】：

<script> 标签可以从任何地方（甚至跨域）加载任何 JS 文件。它的好处是该脚本中的代码也会被执行，因此是一种绕过跨域限制的方法。

问题是，当代码被执行时，它是在全局范围内执行的。所以有这个代码：

var test = 'foo'

将在全局范围内创建一个test 变量。

为了缓解这种情况，您可以将回复包含在一个函数中。这是“JSONP”中的“P”，意思是“填充”。这会将您的回复包含在函数调用中。

所以如果你的外国脚本有：

myFunction({
    test : 'foo'
});

它调用myFunction 并传递一个带有test 键值foo 的对象。接收函数如下所示：

function myFunction(data){
    //"data.test" is "foo"
}

现在我们已经成功绕过了跨域限制。所需的基本部件是：

接收函数（使用后可以动态创建和丢弃）
“填充”JSON 回复

【讨论】：

很好的答案，谢谢。既然script标签是随页面一起加载的，那么如何使用script标签来代替传统的ajax调用，其中ajax调用是由某个事件触发的呢？
@Kristian AJAX 受到限制跨域通信的同源策略的限制，使用跨域资源共享 (CORS) 时除外。 CORS 需要将服务器设置为允许 CORS 请求。然而，JSONP 没有。它只是加载任何脚本并执行它们。这就像“纯粹的客户端魔法”——没有后端干预。
对不起，我的问题肯定措辞含糊。改写：jsonp/script标签方法不限于在初始页面加载时执行吗？而 ajax 的 json 请求会在事件触发时发生.. 我该如何调和这个时间差异？
@Kristian 是的，JSONP 可以在任何时间点启动。只需以 JSONP 格式加载所需的脚本。它们也是异步的。

【解决方案2】：

真的只需要这样（把它变成一个函数+参数）吗？

是的。

为什么解决了跨域访问限制问题？

您应该阅读有关JSONP 的信息。这个想法是您现在可以包含一个动态指向资源的<script> 标记，而不是发送 AJAX 请求（这是被禁止的）。由于你已经用函数名包装了内容，这个函数将被执行并作为参数传递给 JSON 对象。所以剩下的就是定义这个函数了。

【讨论】：

【解决方案3】：

是因为他添加的JSONP语句。

“带填充的 JSON”是对基本 JSON 数据格式的补充。它提供了一种从不同域中的服务器请求数据的方法，这是典型的 Web 浏览器由于同源策略而禁止的。

这通过脚本元素注入工作。

JSONP 仅在与脚本元素一起使用时才有意义。对于每个新的 JSONP 请求，浏览器必须添加一个新元素，或重用现有元素。前一个选项 - 添加新的脚本元素 - 是通过动态 DOM 操作完成的，称为脚本元素注入。该元素被注入 HTML DOM，并将所需 JSONP 端点的 URL 设置为“src”属性。这种动态脚本元素注入通常由 javascript 帮助程序库完成。 jQuery等框架有jsonp辅助功能；还有独立选项。

来源：http://en.wikipedia.org/wiki/JSONP

【讨论】：