夏日博客

A-A+

js中实现浏览器跨域访问解决方案

2016年01月13日 前端设计 暂无评论 阅读 6 views 次

js中实现浏览器跨域访问可以使用js也可以使用html5了，希望文章能够让各位更深入的关于js实现浏览器跨域访问的原理与方案。

跨域的概念

跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域。例如：about. www.xiariboke.net和www.你的域名都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。下面举例，每两个一组。

URL 说明 是否允许通信

http://www.你的域名/a.js

http://www.你的域名/b.js 同一域名下 允许

http://www.你的域名/lab/a.js

http://www.你的域名/script/b.js 同一域名下不同文件夹 允许

http://www.你的域名:8000/a.js

http://www.你的域名/b.js 同一域名，不同端口 不允许

http://www.你的域名/a.js

https://www.你的域名/b.js 同一域名，不同协议 不允许

http://www.你的域名/a.js

http://60.32.92.74/b.js 域名和域名对应ip 不允许

http://www.你的域名/a.js

http://about.你的域名/b.js 主域相同，子域不同 不允许

http://www.你的域名/a.js

http://你的域名/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）

http://www.hao123.com/a.js

http://www.你的域名/b.js 不同域名 不允许

解决跨域的方案

上一篇文章，我写了window.postMessage，是一种跨域的解决方案。今天再介绍几个。

CORS跨域资源共享

众所周知，我们之前跨域很多时候用的是jsonp的方式，jsonp的方式我后面介绍。下面说说CORS跨域和jsonp跨域的优势：

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

1、JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

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

3、JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。[低版本IE7以下不支持，要支持IE7还是要用jsonp方式]

CORS的使用

CORS要前后端同时做配置。

1、首先我们来看前端。

纯js的ajax请求。

  1. <script type="text/javascript">  
  2.     var xhr = new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。  
  3.     xhr.open("GET", "/haorooms",true);  
  4.     xhr.send();  
  5. </script>  

以上的haorooms是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：

  1. <script type="text/javascript">  
  2.     var xhr = new XMLHttpRequest();//ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。  
  3.     xhr.open("GET", "http://www.你的域名/CORS",true);  
  4.     xhr.send();  
  5. </script>  

当然,你也可以用jquery的ajax进行。

2、后端或者服务器端的配置

下面我们主要介绍Apache和PHP里的设置方法。

Apache：Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的 , , 或的配置里加入以下内容即可：

Header set Access-Control-Allow-Origin *

PHP:只需要使用如下的代码设置即可。

header("Access-Control-Allow-Origin:*");

以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源，例如下面的设置使得只有www.你的域名这个域才能跨域访问服务器的API。

Access-Control-Allow-Origin: http://www.你的域名

通过jsonp跨域

jsonp跨域也需要前后端配合使用。一般后端设置callback ，前端给后台接口中传一个callback 就可以。

例如前端代码:

  1. <script type="text/javascript">  
  2.     function dosomething(jsondata){  
  3.         //处理获得的json数据  
  4.     }  
  5. </script>  

后台代码：

  1. <?php  
  2. $callback = $_GET['callback'];//得到回调函数名  
  3. $data = array('a','b','c');//要返回的数据  
  4. echo $callback.'('.json_encode($data).')';//输出  
  5. ?>  

假如你用ajax方式进行jsonp跨域，我之前的一篇文章中提及过：http://www.你的域名/post/jquery_ajax_wg

  1. /*   
  2. //简写形式，效果相同   
  3. $.getJSON("url跨域地址",  {参数，要把callback作为参数传到后端}， 
  4.         function(data){   
  5.             //结构处理  
  6. },"jsonp");   
  7. */    
  8. $.ajax({    
  9.     type : "get",    
  10.     url : "跨域地址",    
  11.     dataType : "jsonp",//数据类型为jsonp    
  12.     jsonp: "callback",//服务端用于接收callback调用的function名的参数【后台接受什么参数，我们就传什么参数】我们上面设置是callback  
  13.     success : function(data){    
  14.         //结果处理  
  15.     },    
  16.     error:function(data){    
  17.           console.log(data);  
  18.     }    
  19. });  

通过修改document.domain来跨子域

我们只需要在跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。

例如:1.在页面 http:// www.你的域名/a.html 中设置document.domain

  1. <iframe id = "iframe" src="http://你的域名/b.html" onload = "test()"></iframe>  
  2. <script type="text/javascript">  
  3.     document.domain = '你的域名';//设置成主域  
  4.     function test(){  
  5.         alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象  
  6.     }  
  7. </script>  

2、在页面http:// 你的域名/b.html 中设置document.domain

  1. <script type="text/javascript">  
  2.     document.domain = '你的域名';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同  
  3. </script>  

使用window.name来进行跨域

原理:

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。

方法:

假如有三个页面。

a.com/app.html：应用页面。

a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。

b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

1、在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。

数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：

  1. <script type="text/javascript">  
  2.     window.name = 'I was there!';    // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右  
  3.                                      // 数据格式可以自定义，如json、字符串  
  4. </script>  

2、在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。

app.html部分代码如下：

  1. <script type="text/javascript">  
  2.     var state = 0,   
  3.     iframe = document.createElement('iframe'),  
  4.     loadfn = function() {  
  5.         if (state === 1) {  
  6.             var data = iframe.contentWindow.name;    // 读取数据  
  7.             alert(data);    //弹出'I was there!'  
  8.         } else if (state === 0) {  
  9.             state = 1;  
  10.             iframe.contentWindow.location = "http://a.com/proxy.html";    // 设置的代理文件  
  11.         }    
  12.     };  
  13.     iframe.src = 'http://b.com/data.html';  
  14.     if (iframe.attachEvent) {  
  15.         iframe.attachEvent('onload', loadfn);  
  16.     } else {  
  17.         iframe.onload  = loadfn;  
  18.     }  
  19.     document.body.appendChild(iframe);  
  20. </script>  

3、获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。

  1. <script type="text/javascript">  
  2.     iframe.contentWindow.document.write('');  
  3.     iframe.contentWindow.close();  
  4.     document.body.removeChild(iframe);  
  5. </script>  

使用HTML5的window.postMessage方法跨域

关于postMessage

window.postMessage虽然说是html5的功能，但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。关于window.postMessage，很多朋友说他可以支持跨域，不错，window.postMessage是客户端和客户端直接的数据传递，既可以跨域传递，也可以同域传递。

应用场景

我只是简单的举一个应用场景，当然，这个功能很多地方可以使用。

假如你有一个页面，页面中拿到部分用户信息，点击进入另外一个页面，另外的页面默认是取不到用户信息的，你可以通过window.postMessage把部分用户信息传到这个页面中。（当然，你要考虑安全性等方面。）

代码举例

发送信息：

  1. //弹出一个新窗口  
  2. var domain = 'http://你的域名';  
  3. var myPopup = window.open(domain   
  4.             + '/windowPostMessageListener.html','myWindow');  
  5. //周期性的发送消息  
  6. setTimeout(function(){  
  7.     //var message = '当前时间是 ' + (new Date().getTime());   
  8.         var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等  
  9.     console.log('传递的数据是  ' + message);  
  10.     myPopup.postMessage(message,domain);  
  11. },1000);  

要延迟一下，我们一般用计时器setTimeout延迟再发用。

接受的页面

  1. //监听消息反馈  
  2. window.addEventListener('message',function(event) {  
  3.     if(event.origin !== 'http://你的域名') return; //这个判断一下是不是我这个域名跳转过来的  
  4.     console.log('received response:  ',event.data);  
  5. },false);  

如下图，接受页面得到数据

enter image description here

如果是使用iframe，代码应该这样写：

  1. //捕获iframe  
  2. var domain = 'http://你的域名';  
  3. var iframe = document.getElementById('myIFrame').contentWindow;  
  4. //发送消息  
  5. setTimeout(function(){  
  6.     //var message = '当前时间是 ' + (new Date().getTime());   
  7.         var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等  
  8.     console.log('传递的数据是:  ' + message);  
  9.         //send the message and target URI  
  10.     iframe.postMessage(message,domain);   
  11. },1000);  

接受数据

  1. //响应事件  
  2. window.addEventListener('message',function(event) {  
  3.     if(event.origin !== 'http://你的域名') return;  
  4.     console.log('message received:  ' + event.data,event);  
  5.     event.source.postMessage('holla back youngin!',event.origin);  
  6. },false);  

上面的代码片段是往消息源反馈信息，确认消息已经收到。下面是几个比较重要的事件属性：

source – 消息源，消息的发送窗口/iframe。

origin – 消息源的URI(可能包含协议、域名和端口)，用来验证数据源。

data – 发送方发送给接收方的数据。

标签：

给我留言