资讯专栏INFORMATION COLUMN

前端跨域总结

caiyongji / 2333人阅读

摘要:通过跨域通过引入的不受同源策略的限制,所以我们可以通过标签引入一个或者是一个其他后缀形式如,等的文件,此文件返回一个函数的调用。

1.跨域的定义

只要协议、域名、端口有任何一个不同,就会被当做为不同的域,如果从A域名访问B域名上的资源就叫做跨域。

下面我们来看下几种跨域的方法:

2.document.domain

浏览器的同源策略有一些限制,第一,不能通过ajax方法去请求不同源的资源;第二,浏览器中不同域的框架之间是不能进行JS交互的。假如有一个页面A,地址是http://www.domain.cn/A.html,在这个页面里有个iframe,它的地址是http://domain.cn/B.html,显然A和B是不同域的,所以我们没法通过JS来访问iframe中的数据和方法。

这种情况就就可以用document.domain来解决。

解决方法就是把http://www.domain.cn/A.html和http://domain.cn/B.html的document.domain设成相同的域名,需要注意的是, 我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

在A中我们把设置document.domain:


 

在B页面中我们也设置document.domain

但是这种方法只适合不同子域的框架间的交互。

3.location.hash

在一个有iframe的页面中,父窗口可以对iframe的URL进行读写,iframe也可以读写父窗口的URL。URL有一部分#加上后面的字符可以用来进行锚点定位,这部分就是hash。利用修改URL的hash部分可以进行双向通信,从而达到跨域的目的。每个window通过改变其他window的location来发送消息,其他窗口通过监听URL变化的事件来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录,而且有些浏览器不支持onhashchange事件,需要轮询来获知URL的改变,最后,这样做也存在缺点,诸如数据直接暴露在了url中,数据容量和类型都有限等。下面是一个例子:

假如父页面是baidu.com/a.html,iframe嵌入的页面为google.com/b.html(此处省略了域名等url属性),要实现此两个页面间的通信可以通过以下方法。

a.html传送数据到b.html,a.html下修改iframe的src为:
google.com/b.html#paco

b.html监听到url发生变化,触发相应操作

b.html传送数据到a.html,由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于父窗口域名下的一个代理iframe

b.html下创建一个隐藏的iframe,此iframe的src是baidu.com域下的,并挂上要传送的hash数据,如src=”http://www.baidu.com/proxy.ht...”

proxy.html监听到url发生变化,修改a.html的url(因为a.html和proxy.html同域,所以proxy.html可修改a.html的url hash)

a.html监听到url发生变化,触发相应操作

b.html的代码:

try {  
    parent.location.hash = "data";  
} catch (e) {  
    // ie、chrome的安全机制无法修改parent.location.hash,  
    var ifrproxy = document.createElement("iframe");  
    ifrproxy.style.display = "none";  
    ifrproxy.src = "http://www.baidu.com/proxy.html#data";  
    document.body.appendChild(ifrproxy);  
}

proxy.html页面的关键代码如下 :

//因为parent.parent(即baidu.com/a.html)和baidu.com/proxy.html属于同一个域,所以可以改变其location.hash的值  
parent.parent.location.hash = self.location.hash.substring(1);
4.通过H5的postMessage()

IE8、Chrome、Firefox、Safari、Opera等浏览器都支持这个方法,这个功能主要包括接收信息的方法和发送消息的postMessage方法。比如damonare.cn域的A页面通过iframe嵌入了一个google.com域的B页面,可以通过以下方法实现A和B的通信:

A页面通过postMessage发送消息:

window.onload = function() {  
    var ifr = document.getElementById("ifr");  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage("hello world!", targetOrigin);  
}

B页面通过message事件监听并接受消息:

var onmessage = function (event) {  
  var data = event.data;//消息  
  var origin = event.origin;//消息来源地址  
  var source = event.source;//源Window对象  
  if(origin=="http://www.baidu.com"){  
console.log(data);//hello world!  
  }  
};  
if (typeof window.addEventListener != "undefined") {  
  window.addEventListener("message", onmessage, false);  
} else if (typeof window.attachEvent != "undefined") {  
  //for ie  
  window.attachEvent("onmessage", onmessage);  
}  

上面几种方式都是页面和iframe之间或者页面和页面之间的,下面介绍的是单向跨域,一般用于获取数据。

5.通过JSOP跨域

通过script引入的JS不受同源策略的限制,所以我们可以通过script标签引入一个js或者是一个其他后缀形式(如php,jsp等)的文件,此文件返回一个js函数的调用。
比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://damonare.cn/data.php,那么a.html中的代码就可以这样:


因为是当做一个js文件来引入的,所以http://damonare.cn/data.php返回的必须是一个能执行的js文件,所以这个页面的php代码可能是这样的,这需要和后端约定好:

最终,输出结果为:dosomething([‘a’,’b’,’c’]);
使用jQuery封装的JSONP方法可以很方便的进行jsonp请求:

jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。

优点:不受到同源策略的影响,兼容性好,在一些古老的浏览器里也可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

缺点:只支持GET请求,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

6. 通过CORS跨域

CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

CORS与JSONP的对比:

JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求;

使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有
更好的错误处理。

CORS与JSONP相比,无疑更为先进、方便和可靠。

7.window.name

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

比如:我们在任意一个页面输入

window.name = "My window"s name";
setTimeout(function(){
    window.location.href = "http://damonare.cn/";
},1000)

进入damonare.cn页面后我们再检测再检测 window.name :

window.name; // My window"s name

由于安全原因,浏览器始终会保持 window.name 是string 类型。

这种方法与 document.domain 方法相比,放宽了域名后缀要相同的限制,可以从任意页面获取 string 类型的数据。

8.反向代理服务器

基础思想很简单,将你的服务器配置成需要 跨域获取的资源 的反向代理服务器。

我们只需要配置nginx,在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样,这个服务器上所有url都是相同的域名、协议和端口。因此,对于浏览器来说,这些url都是同源的,没有跨域限制。而实际上,这些url实际上由物理服务器提供服务。这些服务器内的javascript可以跨域调用所有这些服务器上的url。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/40546.html

相关文章

  • 2018年腾讯前端一面总结(面向2019届学生)

    摘要:前言腾讯一面,相比阿里一面来说,腾讯一面先给打电话预定时间,这也给了我们这些面试者去准备的时间。其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。 前言 腾讯一面,相比阿里一面来说,腾讯一面先给打电话预定时间,这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性,也有在等待电话的时候的心情的忐忑。 背景 我是一名大三学生,大一...

    Kosmos 评论0 收藏0
  • 总结系列〕前端面试题精华筛选

    摘要:所谓同源是指协议域名端口三者相同,即便两个不同的域名指向同一个地址,也非同源。那么怎样解决跨域问题的呢通过跨域跨域跨域跨域跨域资源共享代理跨域中间件代理跨域音乐教程老师有用到协议跨域后端在头部信息里面设置安全域名公司后端给解决过持续更新中 JavaScript篇 如何获取浏览器URL中查询字符串中的参数? 1.封装方法 getUrlArgs(url) { const args =...

    lyning 评论0 收藏0
  • 总结系列〕前端面试题精华筛选

    摘要:所谓同源是指协议域名端口三者相同,即便两个不同的域名指向同一个地址,也非同源。那么怎样解决跨域问题的呢通过跨域跨域跨域跨域跨域资源共享代理跨域中间件代理跨域音乐教程老师有用到协议跨域后端在头部信息里面设置安全域名公司后端给解决过持续更新中 JavaScript篇 如何获取浏览器URL中查询字符串中的参数? 1.封装方法 getUrlArgs(url) { const args =...

    Thanatos 评论0 收藏0
  • 前端跨域方法总结

    摘要:是的,方法被调用时,会在所有页面脚本执行完毕之后向目标窗口派发一个消息。该消息有四个属性需要注意属性表示该的类型属性为的第一个参数属性表示调用方法时调用页面的当前状态属性记录调用方法的窗口信息。 1.为什么要跨域 同源策略限制一个源加载的文档或文档与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的安全机制。什么是同源呢? 如果协议,端口(如果指定了一个)和域名对于两个页面是相...

    PAMPANG 评论0 收藏0
  • 前端跨域总结

    摘要:跨域正确的打开方式经过对同源策略的了解,我们应该要消除对浏览器的误解,同源策略是浏览器做的一件好事,是用来防御来自邪门歪道的攻击,但总不能为了不让坏人进门而把全部人都拒之门外吧。 跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上,无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试,我每次都随便背几个方案,也不知道为什么要这样干,反正面完就可以扔了,我想工作上也不会用到...

    Wuv1Up 评论0 收藏0

发表评论

0条评论

caiyongji

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<