跨域（入门）

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