JS跨域访问

1.简介

跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Web font 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。
同源策略：如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置document.domain 属性将它们认为是同源的。

注：IE的同源策略不包含端口。

出于安全性考虑，浏览器将不允许跨域页面间的JS相互操作，如：主页面和跨域IFrame之间的JS操作，也不允许XMLHttprequest请求跨域内容。

2.解决方案

1)设置document.domain属性

适用于主域名相同的跨域情形。

2)HASH传值

需要设置监听来捕获HASH值的动态改变。

3)JS脚本植入

通过页面动态加载<script>标签实现，该标签的SRC属性设置为跨域请求的URL地址，返回的内容为method(...)形式，其中method为页面内的JS回调函数，通过执行该函数来实现改变。

4)跨域请求标准实现

W3C 工作组中的 Web Applications Working Group（Web 应用工作组）发布了一个 Cross-Origin Resource Sharing（跨域资源共享规范）推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是：该规范只能应用在类似XMLHttprequest 这样的 API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范，已经可以进行跨域请求了。

5)JQuery实现

JQuery.ajax提供了一种dataType为jsonp的访问方式，其实现方式其实就是JS脚本植入。

3.实例

见附件crossDomain.war

将该应用部署在本地的两个不同的端口上，如8080和8380，其中一个端口必须为8380，

访问http://http://localhost:8080/crossDomain/outer.jsp 

可在该页面看到上述的所有解决方案的实现方式。

4.参考资料

http://wenku.baidu.com/view/e69e5d00b52acfc789ebc95f.html