我有两个文件,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
。为什么会这样,我该如何解决这个问题?
答案 0 :(得分:11)
document.domain
机制旨在允许帧之间的客户端通信,而不是客户端到服务器的通信。如果您有一个包含example.com
页面的框架和包含foo.example.com
页面的另一个框架,那么这两个框架无法访问彼此的DOM,除非后者将document.domain
设置为example.com
为你在你的例子中展示了。
跨域AJAX请求的现代首选机制是Cross-Origin Resource Sharing或“CORS”。此机制涉及使目标资源返回一个特殊的HTTP响应标头,指示允许跨域请求。在您的方案中,您将使test3.php
返回以下HTTP响应标头:
Access-Control-Allow-Origin: sub.domain.com
在PHP中你可以这样做:
header("Access-Control-Allow-Origin: sub.domain.com");
您还可以将此标头值设置为*
,以便允许来自任何来源的跨域请求,但请注意,这将允许来自您不是的网站的请求控制。
来自客户端JavaScript库的请求通常还包括不在CORS允许的标准集中的附加头X-Requested-With
,因此可能需要通过附加响应头明确允许此头:
Access-Control-Allow-Headers: X-Requested-With
仅在现代浏览器中支持CORS。对于较旧的浏览器,常见的惯例是使用JSON-P,这是一个利用一个服务器上的页面能够从另一个服务器加载和执行脚本文件这一事实的技巧。这种技术要求目标资源是一个有效的JavaScript程序,它调用页面中的一个函数,因此它不像CORS那样优雅和无缝,但它应该适用于任何支持JavaScript的浏览器。