跨域请求 ​

跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。

原生ajax ​

let xhr = null
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
  }

  xhr.open('GET', 'url', true) // xhr.open(method, url, async, user, password);
  // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') // post请求头
  xhr.send() // post传参： send("name=laoa$age=97")
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText)
    }
  }

jsonp ​

jsonp的原理就是利用script标签没有跨域限制，通过script标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

cors ​

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

nginx反向代理 ​

服务配置一个代理服务器，反向代理请求跨域接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问。

nodejs中间件代理 ​

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

webSocket协议跨域 ​

iframe跨域通讯 ​

document.domain + iframe跨域 ​

两个域名必须属于同一个一级域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域 例如news.maps131.com，和game.maps131.com，news页面iframe了game页面，因为跨域所以news和game无法相互访问起window对象，把两个的document.domain设置为maps131.com就OK了，其他的不行会报错。

location.hash + iframe跨域 ​

利用iframe的引用地址修改hash和监听hash，再加一个相同域名页面实现。 例如A嵌B,B嵌C，A，C同域名端口。C可以通过window.parent.parent访问A，所以可以在创建一个方法接受C传进来的参数

1. A修改iframeB页面的hash值
2. B页面监听hash改变，拿到hash值
3. B修改iframeC页面的hash值
4. C页面监听到hash改变，拿到hash值
5. C页面中转，利用window.parent.parent，调用A的方法，比如callback(hash)，A内就会执行这个方法

• A.html

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
  <script>
      var iframe = document.getElementById('iframe');

      // 向b.html传hash值
      setTimeout(function() {
          iframe.src = iframe.src + '#user=admin';
      }, 1000);
      
      // 开放给同域c.html的回调方法
      function onCallback(res) {
          alert('data from c.html ---> ' + res);
      }
  </script>

• B.html

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
  <script>
      var iframe = document.getElementById('iframe');

      // 监听a.html传来的hash值，再传给c.html
      window.onhashchange = function () {
          iframe.src = iframe.src + location.hash;
      };
  </script>

• C.html （与A同域名端口)

<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
  </script>

window.name + iframe跨域 ​

利用window.name的独特之处，name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

1. A页面创建一个方法，监听iframe的onload方法，会触发两次
2. 执行iframe创建，指向B页面，B页面将要传递的数据赋值给window.name
3. 第一次触发将iframe.contentWindow.loaction设置为和A同域名的空代理页面C
4. 第二次将则可以去获取B传进来的name值，用iframe.contentWindow.name获取

• A.html

var proxy = function(url, callback) {
      var state = 0;
      var iframe = document.createElement('iframe');

      // 加载跨域页面
      iframe.src = url;

      // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
      iframe.onload = function() {
          if (state === 1) {
              // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
              callback(iframe.contentWindow.name);
              destoryFrame();

          } else if (state === 0) {
              // 第1次onload(跨域页)成功后，切换到同域代理页面
              iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
              state = 1;
          }
      };

      document.body.appendChild(iframe);

      // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
      function destoryFrame() {
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
          document.body.removeChild(iframe);
      }
  };

  // 请求跨域b页面数据
  proxy('http://www.domain2.com/b.html', function(data){
      alert(data);
  });

• C.html空页面与A同域名端口
• B.html

window.name = 'This is domain2 data!'

postMessage跨域 ​

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题： a.） 页面和其打开的新窗口的数据传递 b.） 多窗口之间消息传递 c.） 页面与嵌套的iframe消息传递 d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数 data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。 origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1. 利用iframe.contentWindow.postMessage()传递数据，并且用window.addEventListener('message',callback)监听返回
2. 内嵌页利用，window.addEventListener('message',callback)监听信息，然后用window.parent.postMessage()传递

• A.html

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
  <script>       
      var iframe = document.getElementById('iframe');
      iframe.onload = function() {
          var data = {
              name: 'aym'
          };
          // 向domain2传送跨域数据
          iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
      };

      // 接受domain2返回数据
      window.addEventListener('message', function(e) {
          alert('data from domain2 ---> ' + e.data);
      }, false);
  </script>

• B.html

<script>
      // 接收domain1的数据
      window.addEventListener('message', function(e) {
          alert('data from domain1 ---> ' + e.data);

          var data = JSON.parse(e.data);
          if (data) {
              data.number = 16;

              // 处理后再发回domain1
              window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
          }
      }, false);
  </script>