同源策略
浏览器出于安全考虑，只允许本域下的接口交互；不同源的客户端脚本，在没有明确授权的前提下，不允许读写对方资源
注意：是浏览器会阻止跨域访问，并不是服务器端不响应请求
本域指的是？
- 同协议：如都是http或https
- 同域名：如都是http://smallmage.com/a和http://smallmage.com/b
- 同端口：如都是80端口
例如：
- http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
- http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
-
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)
需要注意的是： 对于当前页面来说，页面存放的JS文件的域不重要，重要的是加载该JS文件所在的域
什么叫跨域？以及跨域的几种实现方法？
跨域就是指不同域的接口相互访问
实现方法：
-
jsonp
原理：利用script标签的开发策略（也就是不受同源策略的限制），网页可以得到从其他来源动态产生的json数据，而这种使用模式就是jsonp；利用jsonp抓取的并不是json数据，而是JavaScript，用JavaScript解释器运行 -
CORS
cross-origin resource sharing（跨域资源共享）
原理：前端用XMLHttpRequest发送请求进行跨域访问时，浏览器检测到是跨域，会在请求头里添加“origin”，后端回复数据时添加头信息："Access-Control-Allow-Origin"，浏览器检测接收的信息中是否包含"Access-Control-Allow-Origin"，有则处理响应，没有则抛出XMLHttpRequest异常； -
降域
当两个页面都使用同一个基础域名，并且使用相同的协议、端口，可以使用降域来实现跨域访问
如：
页面A的URL: http://a.smallmage.com/a.html
页面B的URL: http://b.smallmage.com/a.html
设置它们两个页面的：window.domain = "smallmage.com"
这样两个网页就可以通信了
-
使用HTML5的postmessage（适用于两个iframe或两个页面之间）
- window.postMessage方法是HTML5引进的新特性
- 可以使用它向其他页面发送数据，无论是否同源
postMessage调用语法如下：
otherWindow.postMessage(message, targetOrigin, [transfer]);
postMessage的接收语法如下
window.addEventListener('message', onmessage, false);
代码示例：
$('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*');
})
window.addEventListener('message',function(e) {
$('.main input').value = e.data
console.log(e.data);
});
网友评论