分类总结跨域解决方案应用

前言

笔者之前用过Nginx、Node.js、JSONP方法解决过前端跨域，最近项目上要公开一个方法给其他域下的页面调用，因此又接触到跨域，借此机会在这里分 AJAX方面 的跨域和 操纵JS交互脚本方面 的跨域这两个维度来进行简单总结。本文章是笔者第一篇掘金文章，算是对自己的监督，各位多多指教。

正文

1. 什么是跨域？

广义上的跨域是指一个域下的文档或者脚本试图请求另一个域下的资源。（ps：只要协议、主机、端口三者中任何一个不同，都被当作不同的域哦。）

常见的跨域行为：

a)、资源跳转：<a>标签跳转链接、重定向、表单提交；

b)、资源请求，<link>、<script>、<img>、<frame>的url请求，@font-face()的引用

c)、JS发起的脚本请求、DOM和JS对象的跨域操作

2. 同源策略

只有当协议、主机、端口三者都相同，才算同源。

        主要基于 安全考虑 ，浏览器设置了同源策略，如果“非同源”，浏览器会限制：

a)、网络方面：AJAX不能发送；

b)、DOM和JS对象无法获取、操作；

c)、Cookies、localStorage、IndexDB无法读取；

笔者将b、c点统称为操纵JS脚本方面的跨域，a点位AJAX的跨域。

3.AJAX方面的跨域解决方案

（1）document.domain + ifame

        原理：两个页面强制通过JS设置document.domain为基础主域，使得二者同域，实现跨域。

缺点：因document.domain设置有限制，因此只适用于 主域相同，子域不同 的场景。

实现：

• 父窗口（http://mainDomain.com/a.html）：

<iframe src="http://child.mainDomain.com/b.html"></iframe>

<script>

document.domain = 'mainDomain.com';      // 设置主域         

    var publicKey = 'value';       

</script>

• 子窗口（http://child.mainDomain.com/b.html）：

<iframe src="http://child.mainDomain.com/b.html"></iframe>

<script>

    document.domain = 'mainDomain.com'; // 设置主域

    console.log(parent.publicKey); // 成功访问父窗口的publicKey值

</script>

（2）document.hash+ ifame

        原理：父窗口可以对iframe的src进行读写，子窗口嵌套父窗口同域的页面，通过 parent.parent .callback访问父窗口JS，而服务器会忽视url中#后面的字符，通过浏览器的 hashchange 事件监控到 location.hash 的变化。这样就可以实现iframe之间的通讯。

例子： 实现不同域下的 a.html 和 b.html 之间的通信。

关键代码：

• a.html

// 控制b.html的src并传值
document.getElementById('iframe').src = 'http:domain2.com/b.html#msg=hello';
// 对外暴露回调函数window.oncallback = function(){  
    // ... 回调函数
}复制代码

window.onhashchange = function(e) {       
    // location.hash，处理数据，通过proxy.html执行回调      
    document.getElementById('proxy').src = 'http:domain1.com/proxy#data=123';
}复制代码

• proxy.html

window.onhashchange = function(e) {
    parent.parent.oncallback(loaction.hash)
}复制代码

本文章把跨域分两大类来进行总结，总结要点式概括，有些方法只是一笔带过，又需要的同学可以查看掘金的其他详细类文章。

参考文章：