跨域（入门）

JS跨域

同源策略

所谓“同源”，就是“三个相同”：协议相同、域名相同、端口相同。
同源策略的目的：保证用户信息的安全，防止恶意网站窃取数据。
如果是非同源，共有三种行为会受到限制：
1.Cookie、LocalStorage、IndexDB无法读取；
2.DOM无法获取；（主要场景是ifame跨域的情况，不同域名的iframe是限制互相访问的）
3.AJAX请求不能发送；

跨域的解决方法

跨域资源共享（CORS）

html5新增的标准，IE10以下不支持。
CORS是W3C的标准，全称是跨域资源共享(Cross-Origin Resource sharing)。CORS定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。它的思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是成功还是失败。
使用：
对于前端，我们还是正常使用xhr对象发送ajax请求。唯一需要注意的是，我们需要设置xhr中的withCredentials为true，不然无法传递cookie，xhr.withCredentials=true;
对于服务端，需要在response header中设置如下两个字段：
Access-Control-Allow-Origin:http://www.yourhost.com
Access-Control-Allow-Credentials:true

JSONP

JSONP的原理：在页面上引入不同域上的js脚本文件是可以的，所以可以通过动态创建script标签，然后利用src属性进行跨域。通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。

注：src请求都必须是get方法，就像你在浏览器地址栏输入地址回车一样。

function fun(fata){
    console.log(data);
}
var body=document.getElementsByTagName('body')[0];
var script=document.getElement('script');
script.type='text/javascript';
script.src='demo.js?callback=fun';
body.appendChild(script);
//返回的js脚本直接会执行，就执行已经定义好的fun函数，并且把数据传入进来。
fun({"name":"name"})

CORS VS JSONP
都能解决ajax直接请求普通文件存在跨域无权访问的问题
1.JSONP只能实现get请求，而CORS支持所有类型的http请求
2.使用CORS，开发者可以使用普通的XHR发起请求和获得数据，比起JSONP有更好的错误处理
3.JSONP主要被老的浏览器支持，它们往往不支持CORS，而现代浏览器都支持CORS

document.domain

修改document.domain的方法只适用于不同子域的框架间的交互。
对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域 这种方式非常适用于iframe跨域的情况，比如：
a页面地址为 http://a.yourhost.com 
b页面为 http://b.yourhost.com。
这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。
之后，就可以通过 parent 或者 window['iframename']等方式去拿到iframe的window对象了。

postMessage

postMessage是html5的一个API，可以解决多窗口、窗口和iframe之间的消息通信的跨域问题。
postmessage(data, origin)，其中data指的就是需要传递的数据，origin指的是具体的数据源地址(包括协议+域名+端口)。然后window对message事件进行监听。

<iframe id="iframe" src="http://next.com/next.html"></iframe>
<input id="msg" type="text" placeholder="输入要发送的消息">
<button id="send">发送</button>

document.getElementById('send').onclick = function() {
    var msg = document.getElementById('msg').value;
    var iframeWindow = document.getElementById('iframe').contentWindow;
    iframeWindow.postMessage(msg,"http://next.com/next.html");
}

<div>
    <h2>以下是接收到的消息：</h2>
    <section id="msg">
         
    </section>
</div>

window.addEventListnerner('message',handle,false){//window对message时间监听
}
function handle(event){
    if(event.origin==='http://source.com'){
        document.getElementById('msg').innerHTML=event.data;
    }
}