JS跨域

同源策略

浏览器出于安全考虑，只允许本域下的接口交互；不同源的客户端脚本，在没有明确授权的前提下，不允许读写对方资源
注意：是浏览器会阻止跨域访问，并不是服务器端不响应请求

本域指的是？

• 同协议：如都是http或https
• 同域名：如都是http://smallmage.com/a和http://smallmage.com/b
• 同端口：如都是80端口

例如：

• http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)

• 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);
});