跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域。例如:about.haorooms.com 和 www.haorooms.com 都会构成跨域。总结起来只要协议、域名、端口有任何一个不同,都被当作是不同的域。下面举例,每两个一组。
- URL 说明 是否允许通信
- https://www.haorooms.com/a.js
- https://www.haorooms.com/b.js 同一域名下 允许
- https://www.haorooms.com/lab/a.js
- https://www.haorooms.com/script/b.js 同一域名下不同文件夹 允许
- https://www.haorooms.com:8000/a.js
- https://www.haorooms.com/b.js 同一域名,不同端口 不允许
- https://www.haorooms.com/a.js
- https://www.haorooms.com/b.js 同一域名,不同协议 不允许
- https://www.haorooms.com/a.js
- https://60.32.92.74/b.js 域名和域名对应ip 不允许
- https://www.haorooms.com/a.js
- https://about.haorooms.com/b.js 主域相同,子域不同 不允许
- https://www.haorooms.com/a.js
- https://haorooms.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
- https://www.hao123.com/a.js
- https://www.haorooms.com/b.js 不同域名 不允许
众所周知,我们之前跨域很多时候用的是 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 type="text/javascript">
- var xhr = new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
- xhr.open("GET", "/haorooms", true);
- xhr.send();
- </script>
- <script type="text/javascript">
- var xhr = new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
- xhr.open("?GET", "/haorooms", true);
- xhr.send();
- </script>
以上的 haorooms 是相对路径,如果我们要使用 CORS,相关 Ajax 代码可能如下所示:
- <script type="text/javascript">
- var xhr = new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
- xhr.open("GET", "https://www.haorooms.com/CORS", true);
- xhr.send();
- </script>
- <script type="text/javascript">
- var xhr = new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
- xhr.open("?GET", "https://www.haorooms.com/CORS", true);
- xhr.send();
- </script>
当然,你也可以用 jquery 的 ajax 进行。
2、后端或者服务器端的配置
下面我们主要介绍 Apache 和 PHP 里的设置方法。
Apache:Apache 需要使用 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: https://www.haorooms.com
jsonp 跨域也需要前后端配合使用。一般后端设置 callback ,前端给后台接口中传一个 callback 就可以。
例如前端代码:
- <script type="text/javascript">
- function dosomething(jsondata){
- //处理获得的json数据
- }
- </script>
- <script src="https://haorooms.com/data.php?callback=dosomething"></script>
后台代码:
- <?php
- $callback = $_GET['callback'];//得到回调函数名
- $data = array('a','b','c');//要返回的数据
- echo $callback.'('.json_encode($data).')';//输出
- ?>
假如你用 ajax 方式进行 jsonp 跨域
- /*
- //简写形式,效果相同
- $.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 的方法只适用于不同子域的框架间的交互。
例如:1. 在页面 https:// www.haorooms.com/a.html 中设置 document.domain
- <iframe id = "iframe" src="https://haorooms.com/b.html" onload = "test()"></iframe>
- <script type="text/javascript">
- document.domain = 'haorooms.com';//设置成主域
- function test(){
- alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
- }
- </script>
2、在页面 https:// haorooms.com/b.html 中设置 document.domain
- <script type="text/javascript">
- document.domain = 'haorooms.com';//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同
- </script>
- <script type="text/javascript">
- document.domain = 'haorooms.com';//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同
- </script>
原理:
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 type="text/javascript">
- window.name = 'I was there!'; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
- // 数据格式可以自定义,如json、字符串
- </script>
- <script type="text/javascript">
- window.name = 'I was there!'; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
- // 数据格式可以自定义,如json、字符串
- </script>
2、在应用页面(a.com/app.html)中监听 iframe 的 onload 事件,在此事件中设置这个 iframe 的 src 指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。
app.html 部分代码如下:
- <script type="text/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 = "https://a.com/proxy.html"; // 设置的代理文件
- }
- };
- iframe.src = 'https://b.com/data.html';
- if (iframe.attachEvent) {
- iframe.attachEvent('onload', loadfn);
- } else {
- iframe.onload = loadfn;
- }
- document.body.appendChild(iframe);
- </script>
- <script type="text/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 = "https://a.com/proxy.html"; // 设置的代理文件
- }
- };
- iframe.src = 'https://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 type="text/javascript">
- iframe.contentWindow.document.write('');
- iframe.contentWindow.close();
- document.body.removeChild(iframe);
- </script>
- <script type="text/javascript">
- iframe.contentWindow.document.write('');
- iframe.contentWindow.close();
- document.body.removeChild(iframe);
- </script>
来源: https://www.2cto.com/kf/201712/703265.html