整理来源,侵删致歉
浅谈WEB跨域的实现（前端向）
前端解决跨域的九种方法

###1. Cross-document messaging

crossDocumentMessages

在 Cross-document messaging 中，我们可以使用 postMessage 方法和 onmessage 事件来实现不同域之间的通信，其中postMessage用于实时向接收信息的页面发送消息，其语法为：

1
2
3
4
5
  otherWindow.postMessage(message, targetOrigin);

otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 允许通信的域的url，“*”表示不作限制。

我们可以在父页面中嵌入不同域的子页面（iframe实现，而且常规会把它隐藏掉），在子页面调用 postMessage 方法向父页面发送数据：

父页面（http://localhost:10847/sop/a.html）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>postMessage</title>
</head>
<body>
<iframe style="display:none;" id="ifr" src="http://127.0.0.1:10847/sop/b.html"></iframe>
<script type="text/javascript">
    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin == 'http://127.0.0.1:10847') {
            alert(event.data);    // 弹出从子页面post过来的信息
        }
    }, false);
</script>
</body>
</html>

子页面（http://127.0.0.1:10847/sop/b.html）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
<script type="text/javascript">
    var ifr = window.parent;  //获取父窗体
    var targetOrigin = 'http://localhost:10847';  // 若写成 http://127.0.0.1:10847 则将无法执行postMessage
    ifr.postMessage('这是传递给a.html的信息', targetOrigin);
</script>
</body>
</html>

2. WebSocket

具体实现 https://www.cnblogs.com/vajoy/p/4295825.html

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很棒的实现。
socket.io很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容（例如替换为Flash Socket/Comet）。

3. document.domain + iframe跨域

该方法只适合主域相同但子域不同的情况，比如 a.com 和 www.a.com，我们只需要给这两个页面都加上一句 document.domain = ‘a.com’ ，就可以在其中一个页面嵌套另一个页面，然后进行窗体间的交互。

iframe跨域POST无刷新提交

父窗口(http://www.demo.com/a.html)

1
2
3
4
5
<iframe id="iframe" src="http://child.demo.com/b.html"></iframe>
<script>
    document.domain = 'demo.com';
    var user = 'admin';
</script>

子窗口：(http://child.demo.com/b.html)

1
2
3
4
5
<script>
    document.domain = 'demo.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

4. location.hash + iframe跨域

利用url地址改变但不刷新页面的特性（在url： http://a.com#hello 中的 ‘#hello’ 就是location.hash，改变hash并不会导致页面刷新，所以可以利用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页面所有对象。

a.html：(http://www.demo1.com/a.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);

    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>

b.html：(http://www.demo2.com/b.html)

1
2
3
4
5
6
7
8
9
<iframe id="iframe" src="http://www.demo1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

c.html：(http://www.demo1.com/c.html)

1
2
3
4
5
6
7
<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

5. window.name + iframe跨域

窗体的name值在页面跳转后依旧存在、保持原值（即使跳转的页面不同域），并且可以支持非常长的 name 值（2MB）。

如果我们在a页面需要和不同域的b页面通信，我们可以现在a页面嵌入b页面，待b页面有数据要传递时，把数据附加到b页面窗口的window.name上，然后把窗口跳转到一个和a页面同域的c页面，这样a就能轻松获取到内嵌窗体（地址已由跨域的b变为同域的c）的window.name了（如果需要，获取到数据后再把c跳转到b，并重复循环前面的步骤，同时a页面以setInterval的形式来达到轮询的效果）。

a.html：(http://www.demo1.com/a.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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.demo1.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.demo2.com/b.html', function(data){
    alert(data);
});

proxy.html：(http://www.demo1.com/proxy....
中间代理页，与a.html同域，内容为空即可。

b.html：(http://www.demo2.com/b.html)

1
2
3
<script>
    window.name = 'This is demo2 data!';
</script>

6. nginx代理跨域

具体示例：https://www.cnblogs.com/sdcs/p/8484905.html

nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

1
2
3
location / {
  add_header Access-Control-Allow-Origin *;
}

nginx反向代理接口跨域
通过nginx配置一个代理服务器（域名与demo1相同，端口不同）做跳板机，反向代理访问demo2接口，并且可以顺便修改cookie中demo信息，方便当前域cookie写入，实现跨域登录。