2016前端学习（四）

Posted on Edited on Comments:

跨域

写过Ajax一般都知道，通过XHR实现Ajax通信的一个主要限制就是跨域安全策略

当然，有些开发中必然少不了跨域开发的问题，所以就出现了CORS

1、CORS

CORS （Cross-orgin Resource Sharing） 跨域资源共享。

CORS的基本思想是，使用自定义的HTTP头部信息让浏览器跟服务器沟通，从而决定请求或相应的成功或失败。

有那么两个跨域可能造成的危害

CSRF (Cross-site Resource Forgery) 跨站点请求伪造
XSS (Cross-site Scripting) 跨站点脚本

当然，目前主流的浏览器都支持XHR的CORS，但是需要服务端的配合修改。那么，机智的前端们总会想出写完美解决的方法，例如JSONP。

2、JSONP

JSONP （JSON with padding） 填充式JSON 或者说参数式JSON。

JSONP是目前用的比较广泛的跨域技术。

JSONP的原理是动态添加script标签，并处理返回的json数据。例如 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * jsonp function
 *
 * @param {string} url
 * @param {string} callback
 */
function jsonp (url, callback) {
    "use strict";

    var _script = document.createElement('script'),
        _head = document.getElementsByTagName('head')[0];

    _script.src = url + '?callback=' + callback;
    _head.appendChild(_script);
}


jsonp('http://pr.10years.me/webschool', 'jsonpCallback');
window.jsonpCallback = function (res) {
    "use strict";

    // do something
    console.log(res);
};

注意点： 传入的callback为string类型。。

当然， JSONP也存在不足：
1、因为JSONP是从不同域加载，所以如果不是信任的站点可能存在不安全的现象
2、要确定JSONP请求是否失败并不容易（虽然说HTML5有了script的onerror属性，但是目前浏览器支持情况并不是很好。貌似只能通过很恶心的轮训来判断是否加载成功。）

3、Comet

Comet 服务器推送， 分为长轮询 和流。

4、Web Scokets

… 更多请自行Google了解