同源策略
为了保证用户信息的安全,防止恶意的网站窃取数据,所有的浏览器都实行这个策略。
同源策略是指,用户在A网页上的所产生的信息,B网页上不能访问,反过来A网页也不能访问其它网页的信息,除非这两个网页"同源"。
为什么说同源策略可以保证用户信息安全,举个栗子:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
两个文档同源需满足
1. 协议相同
2. 域名相同
3. 端口相同
Ajax跨域通信
同源策略规定,Ajax请求只能发给同源的网址,否则就报错。然而我们开发过程中常常会碰到需要请求不同服务器上的数据。那么Ajax跨域通信就必须要解决了。
三种方式:
CORS
Access-Control-Allow-Origin:允许哪些url可以跨域请求到本域,Access-Control-Allow-Origin:* 表示所有url都可以请求到本域名,如果你很懒可以这样写
Access-Control-Allow-Methods:允许的请求方法,一般是GET,POST,PUT,DELETE,OPTIONS
Access-Control-Max-Age:表明在该时间段内不再“预检”允许的请求方法(相当于缓存),即不以OPTIONS方法进行请求
Access-Control-Allow-Headers:允许哪些请求头可以跨域
CORS Python服务器请求头示例:
你将以下代码放到你的php代码的头部,咱们就可以实现ajax跨域请求了
response = HttpResponse(json.dumps({"key": "value", "key2": "value"})) response["Access-Control-Allow-Origin"] = "*" response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS" response["Access-Control-Max-Age"] = "1000" response["Access-Control-Allow-Headers"] = "*"
IE10以上版本,都好办,问题是有些用户就用了IE7,8该怎么办?当然,首先是鄙视一下这部分用户,鄙视完了,还是要想办法解决问题,毕竟做产品还是要以用户为上~
网上查了一圈,发现IE7 和以前是不支持跨域请求的, IE8 通过 XMLDocumentRequest实现,而不是 XMLHTTPRequest,所以IE8下面应该这样写:
// 创建XHR对象
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 针对Chrome/Safari/Firefox.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// 针对IE
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 不支持CORS
xhr = null;
}
return xhr;
}
// 发送CORS请求
function makeCorsRequest(method, url, cb) {
// bibliographica.org是支持CORS的
var xhr = createCORSRequest(method, url);
if (!xhr) {
alert('CORS not supported');
return;
}
// 回应处理
xhr.onload = function () {
var text = xhr.responseText;
text = $.parseJSON(text);
cb(text);
};
xhr.onerror = function () {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
拉下来,我们就区分一下浏览器,如果是IE10以下版本,那就直接另一种方式,调用上面的实现方式。