关于跨域(子域)ajax请求的问题

Question

假设我从http://www.example.com/index.html加载了主页面.在该页面上有js代码向http://n1.example.com//echo?message=hello发出ajax请求.收到响应后,主页上的div将使用响应正文进行更新.

这适用于所有流行的浏览器吗？

编辑:

显而易见的解决方案是将代理放在www.example.com和n1.example.com之前并进行设置,以便每个发送到http://www.example.com/n1子资源的请求都代理到http: //n1.example.com/.

Answer 1

跨域完全是一个不同的主题.但跨子域相对容易.您需要做的就是在父页面和iframe页面中将document.domain设置为相同.

document.domain = "yourdomain.com"

更多信息在这里

注:此方法将只能让你互动的I帧从您的域的父母.它并没有改变由XMLHttpRequest的发送起源.

Answer 2

另一个可能适用于您的解决方案是在DOM中动态插入/删除指向目标域的脚本标记.如果目标返回json并支持回调,这将有效.

处理结果的函数:

<script type="text/javascript">
  function foo(result) {
    alert( result );
  }
</script>

您可以动态插入以下内容,而不是执行AJAX请求:

<script type="text/javascript" src="http://n1.example.com/echo?callback=foo"></script>

Answer 3

所有现代浏览器都支持CORS,从此我们应该利用这一新增功能.

它适用于简单的握手技术,即2个域通过发送/接收的HTTP头进行相互信任.这是一个漫长的期待,因为同样的原始政策是必要的,以避免XSS和其他恶意企图.

要启动跨源请求,浏览器会使用Origin HTTP标头发送请求.此标头的值是为页面提供服务的站点.例如,假设http://www.example-social-network.com上的页面试图访问online-personal-calendar.com中的用户数据.如果用户的浏览器实现了CORS,则会发送以下请求标头:

来源:http://www.example-social-network.com

如果online-personal-calendar.com允许请求,它会在其响应中发送一个Access-Control-Allow-Origin标头.标头的值指示允许的源站点.例如,对先前请求的响应将包含以下内容:

Access-Control-Allow-Origin:http://www.example-social-network.com

如果服务器不允许跨源请求,则浏览器将向example-social-network.com页面而不是online-personal-calendar.com响应发送错误.

要允许访问所有页面,服务器可以发送以下响应头:

Access-Control-Allow-Origin:*

但是,这可能不适合担心安全问题的情况.

在下面的wiki页面中很好地解释了这一点. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing