关于前端跨域这个老生长谈的问题，解决方案也是铺天盖地，但大家是否真正从原理上到实践已经完全掌握了呢？小郭今天将总结所有的跨域解决方案，让你在面试中收获满分。

本文将从跨域场景到跨域方案逐一说明，重点突出最常用跨域方案，让你工作开发不用愁。

由于本文涉及篇幅较长，因此分上下集讲述，力争把最全面的跨域问题分享给大家。

概念

广义跨域：一个域下的文档或脚本试图去请求另一个域下的资源，这被称作为广义上跨域。

举例：

• 资源跳转： A链接、重定向、表单提交
• 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件
• 外链脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

我们经常讨论的跨域是从狭义角度去理解，即：由浏览器同源策略限制的一类请求场景。先来解释一下，什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

所谓同源是指"协议+域名+端口"三者相同且必须相同，即便两个不同的域名指向同一个ip地址，也非同源。

给大家列举同源策略限制的的场景：

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://m.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

以上就是关于跨域的原理，那接下来整理一下前端都有哪些跨域解决方案，哪些是最常用的方案。

方案

• 通过jsonp跨域
• document.domain + iframe
• 跨域location.hash + iframe
• window.name + iframe跨域
• postMessage跨域跨域资源共享（CORS)
• nginx代理跨域
• nodejs中间件代理跨域
• WebSocket协议跨域

以上方案相信大家或多或少都有所了解，在这里重点突出常用方案。

方案一：通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。但只能实现get一种请求。不推荐

方案二：document.domain + iframe跨域

两个页面都通过js强制设置document.domain为基础主域，就实现了同域。因此此方案仅限主域相同，子域不同的跨域应用场景。不推荐

方案三： location.hash + iframe跨域

a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

实现方式：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。因为实现比较繁琐，故不推荐

方案四： window.name + iframe跨域

window.name属性的独特之处在于name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值。

请求页：http://www.domain1.com/a.html

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加载跨域页面
    iframe.src = url;

    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

代理页：http://www.domain1.com/proxy

中间代理页，与a.html同域，无需添加内容

被请求页：http://www.domain2.com/b.html

<script>
    window.name = 'This is domain2 data!';
</script>

通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。但操作依然复杂，不推荐使用

方案五：postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，他可以解决这类问题：页面和其打开的新窗口的数据传递；多窗口之间消息传递；页面与嵌套的iframe消息传递。

使用方法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

请求页：http://www.domain1.com/a.html

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

接收页：http://www.domain2.com/b.html

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

该方法虽然直接通过window属性解决跨域，但其适用场景有限，因此不推荐。

上集内容到此结束。

总结一下：本篇主要带大家弄清楚跨域的概念及跨域问题的来源，同时介绍了五种前端跨域问题的解决方案，但以上方案由于不同因素限制，所以均不推荐使用。下集内容将讲述前端最常用的几种跨域解决方案，千万不要错过。

我是小郭，想了解更多前端知识欢迎关注公众号“一郭鲜”，小郭将带你在前端海洋里驰骋。另外，文章也将同步更新到公众号，谢谢大家关注。