跨域的方式及解决

参考:同源策略

JSONP跨域实现和解决方式

  • 它的工作原理在于script标签不受同源策略限制,并且请求得到script资源后会立即执行。
  • 做法:服务端接到请求后返回数据data,而data被当做参数放在callback中把chuacallback(data)返回给请求端。callback在请求端已经定义好,当callback(data)到达时被当做js执行,然后展示在页面上。

CROS 实现跨域

CORS全称是跨域资源共享(Cross-origin resource sharing),是一种ajax跨域请求资源的方式,支持现代浏览器,IE支持10以上
CROS 实现跨域的方式很简单和发送ajax请求几乎一样,不同之处在与服务端在收到请求时需要自响应头加上Access-Control-Allow-Origin:请求的域名,或者所有*;
那么这个实现就就简单了,发送请求和ajax一样,回应时加上响应头加上Access-Control-Allow-Origin:origin就可以了。

postMessage实现跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源 。

降域实现跨域

由于同源政策,不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法;这个时候,document.domain就可以派上用场了,我们只要把涉及的两个页面的document.domain都设成相同的域名就可以了。但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

注意:

应该注意到,降域和postMessage都是针对于跨源脚本访问(个人理解就是不同的frame互相访问,并不涉及到对服务器的请求)例子server,例子a.html,例子b.html
效果:在左面(右面)输入内容时其右面(左面)也会出现相同的文字(分别用跨域和postMessage实现)

image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容