网站建设工具的公司,站牛网,wordpress没有登录按钮,企业网站模板是什么浏览器跨域访问解决方案 2015年11月4日 18972次浏览跨域的概念 跨域大家都知道#xff0c;不同地址#xff0c;不同端口#xff0c;不同级别#xff0c;不同协议都会构成跨域。例如#xff1a;about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、… 浏览器跨域访问解决方案 2015年11月4日 18972次浏览 跨域的概念 跨域大家都知道不同地址不同端口不同级别不同协议都会构成跨域。例如about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同都被当作是不同的域。下面举例每两个一组。 URL 说明 是否允许通信 http://www.haorooms.com/a.js http://www.haorooms.com/b.js 同一域名下 允许 http://www.haorooms.com/lab/a.js http://www.haorooms.com/script/b.js 同一域名下不同文件夹 允许 http://www.haorooms.com:8000/a.js http://www.haorooms.com/b.js 同一域名不同端口 不允许 http://www.haorooms.com/a.js https://www.haorooms.com/b.js 同一域名不同协议 不允许 http://www.haorooms.com/a.js
http://60.32.92.74/b.js 域名和域名对应ip 不允许 http://www.haorooms.com/a.js http://about.haorooms.com/b.js 主域相同子域不同 不允许 http://www.haorooms.com/a.js http://haorooms.com/b.js 同一域名不同二级域名同上 不允许cookie这种情况下也不允许访问 http://www.hao123.com/a.js http://www.haorooms.com/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请求。 script typetext/javascript var xhr new XMLHttpRequest(); //ie6以下用new ActiveXObject(Microsoft.XMLHTTP);可以做能力判断。 xhr.open(GET, /haorooms,true); xhr.send(); /script 以上的haorooms是相对路径如果我们要使用CORS相关Ajax代码可能如下所示 script typetext/javascript var xhr new XMLHttpRequest();//ie6以下用new ActiveXObject(Microsoft.XMLHTTP);可以做能力判断。 xhr.open(GET, http://www.haorooms.com/CORS,true); xhr.send(); /script 当然你也可以用jquery的ajax进行。 2、后端或者服务器端的配置 下面我们主要介绍Apache和PHP里的设置方法。 ApacheApache需要使用mod_headers模块来激活HTTP头的设置它默认是激活的。你只需要在Apache配置文件的 Directory , Location, Files 或 VirtualHost的配置里加入以下内容即可 Header set Access-Control-Allow-Origin * PHP只需要使用如下的代码设置即可。 ?php header(Access-Control-Allow-Origin:*); 以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然这样有很大的危险性恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源例如下面的设置使得只有www.haorooms.com这个域才能跨域访问服务器的API。 Access-Control-Allow-Origin: http://www.haorooms.com 通过jsonp跨域 jsonp跨域也需要前后端配合使用。一般后端设置callback 前端给后台接口中传一个callback 就可以。 例如前端代码 script typetext/javascript function dosomething(jsondata){ //处理获得的json数据 } /script script srchttp://haorooms.com/data.php?callbackdosomething/script 后台代码 ?php
$callback $_GET[callback];//得到回调函数名 $data array(a,b,c);//要返回的数据 echo $callback.(.json_encode($data).);//输出 ? 假如你用ajax方式进行jsonp跨域我之前的一篇文章中提及过http://www.haorooms.com/post/jquery_ajax_wg /*
//简写形式效果相同
$.getJSON(url跨域地址, {参数要把callback作为参数传到后端}function(data){ //结构处理
},jsonp);
*/
$.ajax({ type : get, url : 跨域地址, dataType : jsonp,//数据类型为jsonp jsonp: callback,//服务端用于接收callback调用的function名的参数【后台接受什么参数我们就传什么参数】我们上面设置是callback success : function(data){ //结果处理 }, error:function(data){ console.log(data); } }); 通过修改document.domain来跨子域 我们只需要在跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。 例如1.在页面 http:// www.haorooms.com/a.html 中设置document.domain iframe id iframe srchttp://haorooms.com/b.html onload test()/iframe script typetext/javascript document.domain haorooms.com;//设置成主域 function test(){ alert(document.getElementById(iframe).contentWindow);//contentWindow 可取得子窗口的 window 对象 } /script 2、在页面http:// haorooms.com/b.html 中设置document.domain script typetext/javascript document.domain haorooms.com;//在iframe载入这个页面也设置document.domain使之与主页面的document.domain相同 /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代码如下 script typetext/javascript window.name I was there!; // 这里是要传输的数据大小一般为2MIE和firefox下可以大至32M左右 // 数据格式可以自定义如json、字符串 /script 2、在应用页面a.com/app.html中监听iframe的onload事件在此事件中设置这个iframe的src指向本地域的代理文件代理文件和应用页面在同一域下所以可以相互通信。 app.html部分代码如下 script typetext/javascript var state 0, iframe document.createElement(iframe), loadfn function() { if (state 1) { var data iframe.contentWindow.name; // 读取数据 alert(data); //弹出I was there! } else if (state 0) { state 1; iframe.contentWindow.location http://a.com/proxy.html; // 设置的代理文件 } }; iframe.src http://b.com/data.html; if (iframe.attachEvent) { iframe.attachEvent(onload, loadfn); } else { iframe.onload loadfn; } document.body.appendChild(iframe); /script 3、获取数据以后销毁这个iframe释放内存这也保证了安全不被其他域frame js访问。 script typetext/javascript iframe.contentWindow.document.write(); iframe.contentWindow.close(); document.body.removeChild(iframe); /script 使用HTML5的window.postMessage方法跨域 转载于:https://www.cnblogs.com/libaoli/p/7879434.html
