Web浏览器跨域解决方案

Web浏览器跨域解决方案一、什么是跨域跨域（Cross-OriginResourceSharing，CORS）是一个安全机制，用于在Web浏览器中控制在一个源（domain）上的web页面可以从另一个源获取哪些资源。由于浏览器的同源策略（Same-OriginPolicy），默认情况下，一个网页中的JavaScript脚本只能访问与该网页具有相同源的资源，而跨域则涉及到从一个源加载的web页面去获取另一个源的资源。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在下的页面中包含的JavaScript代码，不能访问在域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在下的页面，不能向提交Ajax请求，等等。为什么浏览器要实现同源限制?我们举例说明:比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过javascript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了跨域的情况分为以下几种：特别注意两点：1、如果是协议和端口造成的跨域问题“前台”是无能为力的2、在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。比如上面的/a.js和4/b.js；虽然域名和域名的ip对应，不过还是被认为是跨域。“URL的首部”指tocol+window.location.host。其中，tocol：指含有URL第一部分的字符串,如http:

window.location.host：指包含有URL中主机名:端口号部分的字符串.如///server/二、常用的几种跨域处理方法：

1、CORS（Cross-OriginResourceSharing）策略CORS是一个W3C标准，全称是"跨域资源共享"（Cross-originresourcesharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它为Web服务器定义了一种方式，允许网页从不同的域访问其资源.CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。实现方法：CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。CORS策略的优缺点：优点：1、CORS支持所有类型的HTTP请求。2、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。缺点：

兼容性方面相对差一点，ie10或以上才支持这是官方推荐的解决方案。服务端设置响应头部，允许客户端在跨域请求时进行访问。服务器端需要设置Access-Control-Allow-Origin等相关的CORS头，允许特定来源的请求。2、JSONP原理

：我们知道，在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片，像淘宝等大型网站，肯定会将这些静态资源放入cdn中，然后在页面上连接，如下所示，所以它们是可以链接访问到不同源的资源的。1）<scripttype="text/javascript"src="某某cdn地址"></script>2）<linktype="text/css"rel="stylesheet"href="某个cdn地址"/>3）<imgsrc="某个cdn地址"alt=""/>而jsonp就是利用了script标签的src属性是没有跨域的限制的，从而达到跨域访问的目的。因此它的最基本原理就是：动态添加一个<script>标签来实现。实现方法：

这里是使用ajax来请求的，看起来和ajax没啥区别，其实还是有区别的。

ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。$.ajax({ url:"/services.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result){ //somecode }});JSONP的不足之处：1、只能使用get方法，不能使用post方法我们知道script，link,img等等标签引入外部资源，都是get请求的，那么就决定了jsonp一定是get的。但有时候我们使用的post请求也成功，为啥呢？这是因为当我们指定dataType:'jsonp',不论你指定：type:"post"或者type:"get"，其实质上进行的都是get请求！没有关于JSONP调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到404错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。3、document.domain+iframe的设置

(只有在主域相同的时候才能使用该方法)原理：浏览器中不同域的框架之间是不能进行js的交互操作的。但是不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但是，我们也只能获取到一个几乎无用的window对象。比如，有一个页面，它的地址是/a.html，在这个页面里面有一个iframe，它的src是/b.html,很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。这个时候，document.domain就可以派上用场了，我们只要把/a.html和

/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：中某个文档的document.domain可以设成、、中的任意一个，但是不可以设成,因为这是当前域的子域，也不可以设成,因为主域已经不相同了。使用方法：比如在/a.html的页面里要访问/b.html里面的东西。在页面/a.html中设置document.domain:$(function(){ try{ document.domain="";//这里将document.domain设置成一样 }catch(e){} $("#iframe").load(function(){ variframe=$("#iframe").contentDocument.$; ifram.get("/接口",function(data){}); });});在页面/b.html中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是,但是还是必须显示的设置document.domain的值：$(function(){ try{ document.domain="";//这里将document.domain设置成一样 }catch(e){}});里有个注意点，就是在A页面中，要等iframe标签完成加载B页面之后，再取iframe对象的contentDocument,否则如果B页面没有被iframe完全加载，在A页面中通过contentDocument属性就取不到B页面中的jQuery对象。

一旦取到B页面中的jQuery对象，就可以直接发ajax请求了，这种类似“代理”方式可以解决主子域的跨域问题。缺点：只有在主域相同的时候才能使用该方法

4、HTML5的postMessage原理：就是一个html5所提供的一个API--->HTML5window.postMessage是一个安全的、基于事件的消息API。

在需要发送消息的源窗口调用postMessage方法即可发送消息。其中.源窗口可以是全局的window对象，也可以是以下类型的窗口：文档窗口中的iframe： iframe.documentWindow;JavaScript打开的弹窗： window.open();当前文档窗口的父窗口： window.parent;发送消息：找到源window对象后，即可调用postMessageAPI向目标窗口发送消息：说明：postMessage函数接收两个参数：1、msg,将要发送的消息，可以使一切javascript参数，如字符串，数字，对象，数组等。2、targetOrigin，这个参数称作“目标域”，注意，是目标域不是本域！比如，你想在2.com的网页上往1.com网页上传消息，那么这个参数就是“http://1.com/”，而不是2.com.协议，（一个完整的域名包括：主机名，端口号。如：:80/）

接收消息：那目标窗口要怎么接收传过来的数据呢，只要监听window的message事件就可以接收了。message事件监听函数接收一个参数，Event对象实例，该对象有三个属性：data：

消息origin：消息的来源地址source：发送消息窗口的window对象引用优缺点：优点：方便，安全，有效的解决了跨域问题缺点：万恶的资本主义，ie8+才支持，而且ie8+<ie10只支持iframe的方式。

5、使用来进行跨域（相对比较完美的方法）

原理：当iframe的页面跳到其他地址时，其值保持不变，并且可以支持非常长的name值（2MB）。浏览器跨域iframe禁止互相调用/传值.但是调用iframe时却不变,正是利用这个特性来互相传值,当然跨域下是不容许读取ifram的值.

所以这里我们还要准备一个和主页面/main.html相同域下的代理页面/other.html,iframe调用子页面/data.html使用方法：1、准备三个页面：/main.html

//应用页面/other.html

//代理页面，要求和应用页面在同一个域。一般是一个空的html

/data.html

//应用页面获取数据的页面，简称：数据页面2、数据页面将数据传到中去。如下：/data.html中的="苍老师";/main.html

//应用页面的代码如下：variframeData;varstate=0;//开关变量variframe=document.createElement('iframe');//创建iframevarloadfn=function(){ if(state===1){ iframeData=iframe.contentW;//读取数据 alert('获取到了iframe传过来的妹子'+iframeData); }elseif(state===0){ state=1; iframe.contentWindow.location='/other.html';//这里是代理页面other.html/**这里说明一下:由于iframe的location改变了，相当于重新载入页面（这是iframe的性质决定的），于是重新执行loadfn方法。

由于当iframe的页面跳到其他地址时，其值保持不变，并且此时开关变量state已经变为1，

于是就可以获取到值，也就达到了跨域访问的目的了。**/ };}iframe.src='/data.html';//这是是数据页面，data.htmlif(iframe.attachEvent){ iframe.attachEvent('onload',loadfn);}else{ iframe.onload=loadfn;}document.body.appendChild(iframe);3、获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域framejs访问）。iframe.contentWindow.document.write('');iframe.contentWindow.close();document.body.removeChild(iframe);优缺点：浏览器支持情况好，是比较普遍的使用方法总结以上总结了js跨