跨域问题

1. 同源策略及限制
   1. 同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互
   2. 一个源包括：协议、域名、端口(三者只要有一个不一样就是源不一样，就是跨域)
   3. 限制：不是一个源的文档没有权利去操作另一个源的文档
      主要限制：
      • Cookie、LocalStorage、IndexDB无法读取
      • DOM无法获得
      • Ajax请求不能发送
2. 前后端通信方式
   • Ajax ---同源下的通信方式
   • WebSocket ---不受同源策略的限制
   • CORS ---支持跨域通信，也支持同源通信
3. Ajax

function ajax(method, url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    };
    xhr.open(method, url);
    xhr.send();
}

4. JSONP

1.怎么做到的
  利用script标签的异步加载来实现的
2.怎么实现的
  需要给服务端传递一个回调的名，这个回调的名就是我用加载script标签的方式发出去的一个请求
  原理:利用这个发出请求了,告诉服务端callback的名称，将来要作为函数名来返回的，既然是函数名,要创建一个函数，所以在调jsonp的时候 ，本地必须有一个jsonp的这么全局函数，后面才能把给的数据能执行出来，当函数来运行。
  <script>
    jsonp({
      data:{
      }
    });
  </script>
        
  jsonp.js:
  box({name:'xxx'});

  function createJs(sUrl){
      var oScript =   document.createElement('script');
      oScript.type = "text/javascript";
      oScript.src = sUrl;
      document.getElementsByTagName('head')[0].appendChild(oScript);
  }

  createJs('jsonp.js?callback=box');

  function box(json){
      alert(json.name);
  }

5. WebSocket
   参考地址: http://www.ruanyifeng.com/blog/2017/05/websocket.html
6. CORS
   参考地址:http://www.ruanyifeng.com/blog/2016/04/cors.html