只要协议、域名、端口有任何一个不同,都被当作是不同的域。
也就是“http://www.baidu.com”这个URL首部,必须完全一样才能互相通信。
这个也叫同源策略,当前域名的js只能读取/修改同域下的窗口属性
为什么要有同源策略?为了防止CSRF攻击,保证来至不同源的对象不会互相干扰。
一、通过jsonp跨域(实际上是动态创建script标签)
原理:不同的域可以传输JS文件
服务器的data.php:
<?php
$callback=$_GET[\'callback\'];//得到的回调函数名
$data=array(\'a\',\'b\',\'c\');//需要返回的数据
echo $callback.\'(\'.json_encode($data).\')\';//输出
?>
本地的html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function dosomething(jsondata){
console.log(jsondata)
}
</script>
<script src=\'http://www.a.com/data.php?callback=dosomething\'></script>
</body>
</html>
或者用jquery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<script>
$.getJSON("http://www.a.com/data.php?callback=?", function(jsondata) {
console.log(jsondata);
});
</script>
</body>
</html>
结果:
JSONP的优点是:1.它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;
2.它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;
3.在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点是:1.它只支持GET请求而不支持POST等其它类型的HTTP请求;
2.它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JS调用的问题。
3.jsonp在调用失败的时候不会返回各种HTTP状态码。
4.安全性欠缺。
2、通过document.domain+ iframe (只有在主域相同的时候才能使用该方法)
两个不同域的a.html和b.html
在www.a.com/a.html中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a跨域</title>
</head>
<body>
<script>
function onLoad(){
var iframe=document.getElementById(\'iframe\');
var win=iframe.contentWindow;//能读取iframe里的window对象
var doc=win.document;//无法读取,报错
var name=win.name;//无法读取,报错
}
</script>
<iframe id="iframe" src="http://www.a.com/b.html" onload="onLoad()"></iframe>
</body>
</html>
在www.script.a.com/b.html中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b跨域</title>
</head>
<body>
<div>内容</div>
</body>
</html>
解决办法:在两个页面都插入document.domain,这样就能访问iframe里window对象的各种属性。
<script>
document.domain=\'a.com\';//设置成主域
</script>
3、使用window.name来进行跨域
原理:在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限
同一目录下的a.html和b.html
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a跨域</title>
</head>
<body>
<script>
window.name=\'页面a设置的值\';
setTimeout(function(){
window.location=\'b.html\'
},3000);
</script>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b页面</title>
</head>
<body>
<script>
alert(window.name);
</script>
</body>
</html>
a.html页面载入后3秒,跳转到了b.html页面,弹出“页面a设置的值”
跨域:在b.html里设置window.name,a.html就能访问这个值了(。。。我未成功)
4、使用HTML5的window.postMessage方法来跨域传送数据
不同域的a.html和b.html
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a跨域</title>
</head>
<body>
<script>
function onLoad(){
var iframe=document.getElementById(\'iframe\');
var win=iframe.contentWindow;
win.postMessage(\'来自a页面的信息\',\'*\');//第二个参数为想访问的域,*为通配
}
</script>
<iframe id="iframe" src="http://www.a.com/b.html" onload="onLoad()"></iframe>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b跨域</title>
</head>
<body>
<script>
window.onmessage=function(e){
e=e||event;
alert(e.data);
}
</script>
</body>
</html>
5.利用flash
6.利用iframe和location.hash
7.利用CORS
CORS是自定义HTTP头部,使浏览器和服务器对比,从而决定请求和响应是否应该进行
IE8使用XDR对象实现CORS,和XHR类似用法
var xdr=new XDomainRequest();
xdr.onload=function(){
alert(xdr.responseText)
};
xdr.open(\'get\',"http://www.a.com/");
xdr.send(null)
现代浏览器使用普通的XMLHttpRequest对象请求就行。
8.图像Ping
var img=newImage();
img.onload=img.onerror=function(){
alert(\'1\');
};
img.src="http://www.a.com/test?name=aaa";
缺点:1.只能GET 2.无法访问服务器的响应文本
前面这几种方法,大部分都需要前后两端支持。如果单纯的前端实现跨域,可以使用代理。
1.https://github.com/hongrunhui/node-proxy(未测试过)
2.eezz.com (代理网站请求返回的数据有时候没刷新,可能是请求频率/次数受限制了?所以还是有点小问题)
var requestUrl = "http://www.weather.com.cn/adat/sk/101110101.html";
//这里一定要注意,实际请求的url其实是以参数形式从eezzo.com读取的,因此我们都要对url进行编码,使用encodeURI方法即可
$.getJSON("http://eezzo.com/API/CD", { url: encodeURI(requestUrl) }, function(json) {
console.log(json);
});
3.雅虎代理,同上
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script>
var requestURL="http://www.weather.com.cn/adat/sk/101110101.html";
$.getJSON("http://query.yahooapis.com/v1/public/yql", {
q: "select * from json where url=\\""+requestURL+"\\"", //请注意划线和两个引号
format: "json"
}, function(data) {
if (data.query.results) {
console.log(data.query.results.json);
} else {
console.log(\'no such code: \' + code);
}
});
</script>
4.原生代码实现jsonp跨域读取(动态创建script)
var jsonp = function (url, callback) {
if (typeof url === \'undefined\') {
throw \'the 1st param "url" missing\';
}
if (typeof callback === \'undefined\') {
throw \'the 2nd param "callback" missing\';
}
var jsonpcallback = \'callback\' + new Date().valueOf();
if (typeof callback !== \'string\') {
window[jsonpcallback] = callback;
callback = jsonpcallback;
} else {
window[jsonpcallback] = function (data) {
eval(callback).call(window, data);
}
}
var script = document.createElement(\'script\');