js跨域问题

什么是跨域？

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

简单明了，不明白的话可以百度百科，额。。。。。。

1.document.domain（跨子域）

这个是范围最小的一个。

比如a.example.com 中写了一个iframe，其中src="example.com"，但是因为是不同域的就无法写js获取iframe中的document等。

这时设置document.domain=“example.com”就可以了。

但document.domain的设置是有限制的，必须是本身或者比是本身的父域。

2.window.name

例如在a.com/yyy.html页面要获取b.com/xxx.html中的数据

function domainData(url, fn)
{
var isFirst = true;
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
var loadfn = function(){
if(isFirst){
iframe.contentWindow.location = 'http://a.com/null.html';//其中这个是个空文件
isFirst = false;
} else {
fn(iframe.contentWindow.name);
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
iframe.src = '';
iframe = null;
}
};
iframe.src = url;
if(iframe.attachEvent){
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}

document.body.appendChild(iframe);
}
domainData('http://example.com/', function(data){
alert(data);
});

b.com/xxx.html中：

window.name = "要传输的数据"（可以是JSON，最大2M）

3.H5的window.postMessage(message,targetOrigin)

4.jsonp

举一个jquery、node的例子

$.ajax({
url: "http://192.168.1.100:10011?callback=?",
dataType: 'jsonp',
type: 'get',
success: function(res){
$('#result').val('My name is: ' + res);
console.log(res);
},
error: function(){

}
});

node部分：

var http = require('http');
var urllib = require('url');

var port = 10011;
var data = {
'name': 'hqq',
'age': 22
};

http.createServer(function(req, res){
var params = urllib.parse(req.url, true);
console.log(params);
if (params.query && params.query.callback) {
var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
res.end(str);
} else {
res.end(JSON.stringify(data));//普通的json
console.log(JSON.stringify(data));
}
}).listen(port, function(){
console.log('server is listening on port ' + port);
});

设个断点发现jsonp的原理是动态插入script标签，添加属性src="跨域地址"。然后在url后边加入一个JSONPcallback=functionName，这样后端就能识别出是jsonp请求，返回一个函数名为functionName的函数，其中JSON以入参的形式放入函数中,只支持get请求

（其实JSONP的原理就是动态插入标签而已，没有使用XMLHttpRequest）

5.CORS

使用XMLHttpRequest，get/post请求都支持。

原理是在服务器端设置头部如下：

http.createServer(function(req, res){
res.writeHead(200,{"Access-Control-Allow-Origin": "*"});
}

或者

res.writeHead(200,{"Access-Control-Allow-Origin": "http://localhost:63342"});

浏览器检测到这个头部，就比较一下自己的域名和头部给的允许域名是否一样，一样就允许访问。

OK!!!