前端开发 | 那些年曾谈起的跨域

发布时间：2019-06-21 20:29:08 所属栏目：建站来源：Aaron

导读：对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决，以至于很多人都忽略了对跨域的认识。为什么会导致跨域？遇到跨域又怎么去解决呢？本

子页面：

document.domain = 'a.com';  
$ajax.get({  
    //  ...省略  
})

其实现原理就是通过iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。

location.hash

若理解了document.domain实现跨域原理，那么location.hash也就很号理解了，其原理与document.domain很相似一样都是动态插入一个iframe，然后把iframe的src指向服务端地址，而服务端同样都是输出一段JavaScript代码，同样都是利用和子窗口之间的通信完成数据传输，同样要针对同源策略做出处理。

既然说到了hash到底什么是hash这里也就单独的说一下吧，虽然很好理解，但是对于新同学来说可能还不知道hash具体是什么？

hash:一般翻译做散列、杂凑，或音译为哈希，是把任意长度的输入（又叫做预映射pre-image）通过散列算法变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来确定唯一的输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。 -- 节选自百度百科

读完之后感觉自己整个人都不好了，有些似懂非懂的意思，我所理解的哈希是指一个过程，这个过程就是把任意长度的输入，通过哈希算法，变换成固定长度的输出，所输出的称为哈希值。这种变换是一种压缩映射，也即哈希值所占的空间一般来说远小于输入值的空间，不同的输入可能会哈希出相同的输出（概率很小）。

哈希有如下特点：

如果两个哈希值是不相同的（根据同一函数），那么这两个散列值的原始输入一定是不相同的。
如果两个哈希值相同，两个输入值很可能(极大概率)是相同的，但也可能不同，这种情况称为“哈希碰撞”
抗篡改能力：对于一个数据块，哪怕只改动其一个比特位，其hash值的改动也会非常大。
它是一种单向函数是“非对称”的，即它是一个从明文到密文的不可逆的映射,只有加密过程,没有解密过程。

那么哈希在平时项目开发中有什么用途呢？可以用哈希来做什么事情？对于前端来说用到哈希最多的时候可能就是锚点定位。通过不同的哈希值定位到描点指定的元素位置上。

<a href='#1'>red</a>  
<a href='#2'>black</a>  
<a href='#3'>yellow</a>  
<a href='#4'>pink</a>  
<div id='1' style='width:500px;height:200px;background-color:red'> </div>  
<div id='2' style='width:500px;height:200px;background-color:black'> </div>  
<div id='3' style='width:500px;height:200px;background-color:yellow'> </div>  
<div id='4' style='width:500px;height:1200px;background-color:pink'> </div>

关于更多细节的东西不再这里赘述了，如果想要了解更多的话大家可以自行google，再说下去的话可能就跑题了。

简单的介绍了一下哈希与哈希的用处那么又该如何使用哈希来实现跨域呢？其实很简单，如果index页面要获取远端服务器的数据，动态插入一个iframe，将iframe的src属性指向服务端地址。这时top window和包裹这个iframe的子窗口由于同源策略的原因是不能直接通信的，所以改变子窗口的路径就行了，将数据当做改变后的路径的hash值加在路径上，然后就能通信了，将数据加在index页面地址的hash值上。index页面监听地址的hash值变化然后做出判断，处理数据。

父页面：

<iframe src="http://localhost:7000/b.html#key=1&key1=2"></iframe>

由于哈希值的改变不会改变网页的网址的，所以服务端可以通过获取到哈希来解析url中的参数，并把数据返回给前端即可。通过parent.location.hash去改变哈希值，然后就可以像document.domain一样去获取到子页面的数据了。parent.location.hash该方法是有局限性的，在IE和Chrome中是不支持这种操作的。那么整个问题应如何解决呢？

在同域的域名下面添加一个*.html(*代表任意名)文件，然后把通过iframe把*.html引入到父页面中，并把需要请求的接口iframe添加到*.html中去请求，这样就可以解决了。

http://localhost:6000/a.html

<!DOCTYPE html>  
<html>  
<head>  
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
<title>无</title>  
</head>  
<body>  
<script type="text/javascript">  
function sendRequest(){  
    var ifr = document.createElement('iframe');  
    ifr.style.display = 'none';  
    ifr.src = 'http://localhost:7000/b.html#Aaron';  
    document.body.appendChild(ifr);  
}  
function checkHash(){  
    var data = location.hash?location.hash.substring(1):'';  
    if(data) location.hash = '';  
}  
setInterval(checkHash,1000);  
window.onload = sendRequest;  
</script>  
</body>  
</html>

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

5/15

首页

尾页

杭州网站优化的几个注	网站优化效果不好怎么
网站结构怎么优化？对	网站文章内容持续更新