同源策略
浏览器出于安全方面的考虑，为了保证用户信息的安全，防止恶意的网站窃取数据。只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源 。
而同源指的是：
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
所以只要协议、域名、端口有任何一个不同，都被当作是不同的域。
跨域的方法
1 JSONP
JSONP的全称：JSON with Padding，它是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
在HTML中通过添加一个<script>元素，向服务器请求JSON数据，并定义回调函数
直接设置<script>
<script src="http://example.com/getNews?callback=foo"></script> //foo是回调函数
还可以通过DOM来创建<script>
$('.change').addEventListener('click', function(){ //绑定click事件
var script = document.createElement('script'); //创建<script>元素
script.src ="http:example.com/getNews?callback=foo"; //设置src属性，形成url
document.head.appendChild(script); // 添加<script>
document.head.removeChild(script); //删除<script>
})
function foo(){ //定义回调函数
code //处理得到的数据
}
服务器端也需要进行相应的设置，回传数据
app.get('/getNews', function(req, res){
...
var cb = req.query.callback;
if(cb){
res.send(cb + '('+ JSON.stringify(data) + ')'); //如果有回调函数，返回 foo(JSON数据)
}else{
res.send(data); //返回默认数据
}
})
服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了回调函数，该函数就会立即调用。
优缺点
优点：JSONP不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
缺点：JSONP只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2 CORS
CORS全称是"跨域资源共享"（Cross-origin resource sharing）,定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通，支持IE10以上的浏览器。 实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
服务器端设置Access-Control-Allow-Origin
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080"); //接受'http://a.jrg.com:8080'的请求
res.header("Access-Control-Allow-Origin", "*"); //接受任何域名的请求
此外，CORS请求分成两类：简单请求和非简单请求。浏览器对这两种请求的处理，是不一样的。具体参考阮老师的博客
3 降域
不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。比如以下a.html中有个b.html子页面，因为它们域名不同，两者之间无法进行交互。我们可以通过设置document.domain，让两者的域名相同。
//a.html
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
<script>
document.querySelector('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = "jrg.com" //设置主域名为jrg.com
</script>
//b.html
<input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
<script>
document.querySelector('#input').addEventListener('input', function(){
window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'jrg.com'; //设置主域名为jrg.com
</script>
document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。修改document.domain的方法只适用于不同子域的框架间的交互。
4 postMessage
HTML5为了解决跨域窗口的通信问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。
otherWindow.postMessage(message, targetOrigin, [transfer]); //postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
//父元素a.html
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
window.frames[0].postMessage('Hello World!', 'http://b.jrg.com:8080/b.html'); //向b.html发送'Hello World!'
window.addEventListener('message', function(e) {
console.log(e.data); //监听到并打印出'Nice to see you'
},false);
//子元素b.html
window.parent.postMessage('Nice to see you', 'http://a.jrg.com:8080/a.html'); //向a.html发送'Nice to see you'
window.addEventListener('message', function(e) {
console.log(e.data); //监听到并打印出'Hello World!'
},false);
网友评论