跨域常见解决方案

一、设置 document.domain

原理:相同主域名下不同子域页面,通过设置document.domain让他们同域;
限制:此方法只适用与跨子域的,对于跨父域名,仍然不可行,且需要载入iframe页面。
domain 属性可返回下载当前文档的服务器域名。

二、jsonp

原理:<script>是可以跨域的,而且在跨域脚本中可以直接回调当前脚本的函数。
限制:需要创建一个DOM对象并且添加到DOM树,只能用于GET方法

三、navigation 对象

原理:iframe之间是共享navigator对象的,用它来传递信息
要求:IE6/7
有些人注意到了IE6/7的一个漏洞:iframe之间的window.navigator对象是共享的。 我们可以把它作          为一个Messenger,通过它来传递信息。比如一个简单的委托:

四、window.postMessage

原理:HTML5允许窗口之间发送消息
限制:浏览器需要支持HTML5,获取窗口句柄后才能相互通信
 这是一个安全的跨域通信方法,postMessage(message,targetOrigin)也是HTML5引入的特性。 可以给任何一个window发送消息,不论是否同源。第二个参数可以是*但如果你设置了一个URL但不  相符,那么该事件不会被分发。看一个普通的使用方式吧:
  // URL: http://bentos.com/foo
  var win = window.open('http://b.com/bar');
  win.postMessage('Hello, bar!', 'http://b.com');
  // URL: http://baidu.com/bar
  window.addEventListener('message',function(event) {
     console.log(event.data);
 });

五、跨域资源共享(CORS)

原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持HTML5,可以支持POST,PUT等方法

六. WebSocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很棒的实现。
我们先简单看下webSocket在客户端上的api:

var ws = new WebSocket('ws://127.0.0.1:8080/url'); //新建一个WebSocket对象,注意服务器端的协议必须为“ws://”或“wss://”,其中ws开头是普通的websocket连接,wss是安全的websocket连接,类似于https。
ws.onopen = function() {
    // 连接被打开时调用
};
ws.onerror = function(e) {
    // 在出现错误时调用,例如在连接断掉时
};
ws.onclose = function() {
    // 在连接被关闭时调用
};
ws.onmessage = function(msg) {
    // 在服务器端向客户端发送消息时调用
    // msg.data包含了消息
};
// 这里是如何给服务器端发送一些数据
ws.send('some data');
// 关闭套接口
ws.close();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,485评论 0 5
  • 作者:安静de沉淀https://segmentfault.com/a/1190000011145364 什么是跨...
    layjoy阅读 1,397评论 1 8
  • 什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域: 其实我们通常所...
    WEB攻程狮阅读 1,670评论 1 120
  • 可能你不记得我们在一起多少天了,我也不记得 但是我们的感情依然那样好 不吵不闹 互相理解,互相依偎。 希望一直这样...
    可耐奈的宇哥哥阅读 223评论 0 0
  • 寻着条道,抬脚便走。不必想路途多长,反正每一步都踏在地上。插上耳机听歌,看会随机到哪种心情,随便哼上几句,...
    黄叶漫天阅读 290评论 0 0

友情链接更多精彩内容