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

前言

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

正文

1. 什么是跨域？

        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>

    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)
}

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

参考文章：

• 前端常见跨域解决方案（全）
• 九种跨域方式实现原理（完整版）