前端跨域

一  、JSONP 利用script标签的src属性天然可以跨域的特点，在跨域脚本中可以直接回调当前脚本的函数<script>

    var script = document.createElement('script');

    script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack

    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';

    document.head.appendChild(script);

    // 回调执行函数

    function onBack(res) {

       alert(JSON.stringify(res));

    }

</script>

二 、document.domain + iframe 跨域 此方案仅限于主域相同，子域不同的跨域应用场景

实现原理 两个页面通过JS强制设置document.domain位基础主域，实现跨域

1）父窗口：（http://www.domain.com/a.html）

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

<script>

    document.domain = 'domain.com';

    var user = 'admin';

</script>

   2) 子窗口（http://child.domain.com/b.html）

<script>

    document.domain = 'domain.com';

    // 获取父窗口中变量

    alert('get js data from parent ---> ' + window.parent.user);

</script>

三 location.hash +iframe 跨域

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

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

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe&gt

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

2.）b.html：(http://www.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.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>

3.）c.html：(http://www.domain1.com/c.html)

<script>

// 监听b.html传来的hash值

window.onhashchange = function () {

// 再通过操作同域a.html的js回调，将结果传回

window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));

};

</script>

四 window.name +iframe 跨域

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

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

});

2.）proxy.html：http://www.domain1.com/proxy.html

中间代理页，与a.html同域，内容为空即可。

3.）b.html：(http://www.domain2.com/b.html)

<script>

window.name = 'This is domain2 data!';

</script>

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

五、postMessage跨域

postmessage是H5 level 2 的api。可以用来

a)页面和其他打开的新窗口的数据传递

b)多窗口之间消息传递

c) 页面与嵌套的iframe消息传递

d)上面三个场景的跨域数据传递

用法postmessage（data,origin）方法接受两个参数

data h5规范任意的基本数据类型和可复制的对象，但是由于有的浏览器只支持字符串，所以用的时候要传Json.stringfy() 序列化过的参数。

origin： 协议+主机+端口号，也可以设置为”*”，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/”。

1.）a.html：(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>

2.）b.html：(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>

六、 跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

带cookie请求：前后端都需要设置字段，另外需注意：所带cookie为跨域请求接口所在域的cookie，而非当前页。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

1.）原生ajax

// 前端设置是否带cookie

xhr.withCredentials = true;

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie

xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('user=admin');

xhr.onreadystatechange = function() {

    if (xhr.readyState == 4 && xhr.status == 200) {

        alert(xhr.responseText);

    }

}

2.）jQuery ajax

$.ajax({

    xhrFields: {

       withCredentials: true    // 前端设置是否带cookie

   },

   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie

3.）vue框架

在vue-resource封装的ajax组件中加入以下代码：

1Vue.http.options.credentials = true

2.）Nodejs后台示例：

var http = require('http');

var server = http.createServer();

var qs = require('querystring');

server.on('request', function(req, res) {

    var postData = '';

 // 数据块接收中

    req.addListener('data', function(chunk) {

        postData += chunk;

    });

 // 数据接收完毕

    req.addListener('end', function() {

        postData = qs.parse(postData);

 // 跨域后台设置

        res.writeHead(200, {

            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie

            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）

            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取cookie

        });

     res.write(JSON.stringify(postData));

        res.end();

    });

});

server.listen('8080');

console.log('Server is running at port 8080...');

七，Nginx代理跨域

八，nodejs 中间件代理跨域

九、 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

1.）前端代码：

<div>user input：<input type="text"></div>

<script src="./socket.io.js"></script>

<script>

var socket = io('http://www.domain2.com:8080');

// 连接成功处理

socket.on('connect', function() {

    // 监听服务端消息

    socket.on('message', function(msg) {

        console.log('data from server: ---> ' + msg);

    });

    // 监听服务端关闭

    socket.on('disconnect', function() {

        console.log('Server socket has closed.');

    });

});

document.getElementsByTagName('input')[0].onblur = function() {

    socket.send(this.value);

};

</script>

2.）Nodejs socket后台：

var http = require('http');

var socket = require('socket.io');

// 启http服务

var server = http.createServer(function(req, res) {

    res.writeHead(200, {

        'Content-type': 'text/html'

    });

    res.end();

});

server.listen('8080');

console.log('Server is running at port 8080...');

// 监听socket连接

socket.listen(server).on('connection', function(client) {

    // 接收信息

    client.on('message', function(msg) {

        client.send('hello：' + msg);

        console.log('data from client: ---> ' + msg);

    });

    // 断开处理

    client.on('disconnect', function() {

        console.log('Client socket has closed.');

    });

});

    .

CORS 服务器设置HTTP响应头中Access-Controll-Allow-Oringin的值，解决跨域限制

缺点 严重依赖后端

来源 http://web.jobbole.com/92405/