javascript - 为什么不设置 document.domain 来允许对父域的 AJAX 请求？

Question

我有两个文件，domain.com/test2.php:

<div id="testDiv"></div>

<script src="http://domain.com/packages/jquery.js"></script>
<script>$("#testDiv").load("http://domain.com/test3.php", {var1:1, var2:2});</script>

和 domain.com/test3.php:

<b>var1: <?php echo $var1; ?> , var2: <?php echo $var2; ?></b>

在这种情况下 domain.com/test2.php 输出 var1: 1 , var2: 2 正如人们所期望的那样，但现在假设我想在子域中创建一个 test2.php。为了阻止跨域脚本问题，我会在 sub.domain.com/test2.php 的开头添加这一行:

<script>document.domain = "domain.com";</script>

这个额外的行阻止了跨域错误的出现，但现在文件不再输出 var1: 1 , var2: 2。为什么会这样，我该如何解决？

Answer 1

document.domain 机制旨在允许框架之间的客户端通信，而不是客户端到服务器的通信。如果您有一个框架包含来自 example.com 的页面，而另一个框架包含来自 foo.example.com 的页面，那么除非后者设置，否则两者无法访问彼此的 DOM document.domain 到 example.com，如您在示例中所示。

跨域 AJAX 请求的现代首选机制是 Cross-Origin Resource Sharing ，或“CORS”。此机制涉及让目标资源返回一个特殊的 HTTP 响应 header ，指示允许跨域请求。在您的场景中，您会让 test3.php 返回以下 HTTP 响应 header :

Access-Control-Allow-Origin: sub.domain.com

在 PHP 中，您可以按如下方式执行此操作:

header("Access-Control-Allow-Origin: sub.domain.com");

您也可以将此 header 值设置为 * 以允许来自任何 来源的跨域请求，但请注意，这将允许来自您的站点的请求不控制。

来自客户端 JavaScript 库的请求通常还包含额外的 header X-Requested-With，它不在 CORS 允许的标准集中，因此可能需要通过以下方式显式允许此 header 额外的响应 header :

Access-Control-Allow-Headers: X-Requested-With

CORS 仅在现代浏览器中受支持。对于旧版浏览器，常见约定是使用 JSON-P ，这是一个利用一个服务器上的页面能够从另一台服务器加载和执行脚本文件这一事实的技巧。此技术要求目标资源是调用页面中函数的有效 JavaScript 程序，因此它不像 CORS 那样优雅和无缝，但它应该适用于任何支持 JavaScript 的浏览器。