前端跨域总结

2019年9月26日 170次阅读 来源: echoLC

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：
<iframe id = "iframe" src="http://domain.cn/B.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'domain.cn';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>
  • 在B页面中我们也设置document.domain
<script type="text/javascript">
    document.domain = 'domain.cn';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

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

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中的代码就可以这样：


<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

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

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

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

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    });
</script>

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。

    原文作者：echoLC
    原文地址: https://segmentfault.com/a/1190000010794931
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞