##JSONP方式
这种方法即引入不同源的脚本,该脚本载入后会调用全局的某个方法的,所以只要本页面提供该方法给它调用即可,从而达到跨域的目的。具体应用有jQuery.ajax的jsonp调用,也有script标签引入另外脚本的方式
优点:兼容性好,不需要XMLHttpRequest或ActiveX的支持,在请求完毕后,可以通过调用callback回传结果
缺点:只支持GET请求而不支持POST等其它类型的HTTP请求;只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题;毕竟是脚本注入的方式,所以有一定的安全隐患;
##document.domain
在相同的一级域名/端口/协议等情况下,将俩不同源的脚本的document.domain
设置为一样的,即可达到跨域处理
##window.name 在一个窗口或者iframe中,地址的跳转或变更,其window.name是不变的,利用这一特性来达到跨域传递数据的目的
##HTML5 postMessage
实现跨域POST请求
若在多个iframe之间跨域通信,优先考虑 window.postMessage
在源a中的页面发送消息:
windowObj.postMessage(message, targetOrigin)
在源b中的页面接收消息:
var data = null
var windowObj = window
addEventListener("message", function(e){
if("" === e.origin) {
data = e.data
e.source.postMessage("Get it", "*")
}
})
##实现跨域POST请求
- CORS,Cross-Origin Resource Sharing,W3C制定的跨站资源分享标准。客户端post时会带上Origin头指示来源网站,服务端响应时需带上Access-Control-Allow-Origin头与Origin头的值匹配,以示许可
Ajax提出了名为CORS的标准,打破同源策略的限制,赋予了前端代码访问可信的远程服务的权限。
做法:在服务器端设置Access-Control-Allow-Origin: "*"或指定域名"http://www.test.com"。详细来说,添加受信任的服务器数据源,在HTTP的响应头加几行:
Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET,POST
优点:W3C标准方案
缺点:不兼容老浏览器,IE>=8(需安装caveat)
- invisible iframe, 通过js动态生成不可见表单和iframe,将表单的target设为iframe的name以此通过iframe做post提交。提交后由于跨域,无法直接读取响应内容。一般的做法是,iframe内通过js改变自身location的fragment,外部则监听iframe的onload事件,读取fragment的内容。有现成的跨域iframe通信类库,如jQuery PostMessage Plugin
-
server proxy
-
flash proxy
##双iframe方式(自创)
主应用在源a中运行,主应用提供一个全局的mainCallback
回调函数。调用一个iframe嵌入源b的脚本,用它来处理问题,处理完毕后要调用mainCallback
的回调函数,就再嵌入一个同源a的iframe,该iframe由于与主应用同源,所以直接调用top.mainCallback()
即可实现跨域
参考文章:http://web.jobbole.com/83412/