[front-end] 前端跨域方法总结

浏览器同源政策及其规避方法

jsonp
在页面上引入不同域的js脚本文件，请求页面返回一个带参数的执行函数
只能使用get

<script type="text/javascript">
  function doSth(data) {
    // 处理数据
  }
</script>.
<script src="https://example.com/data?callback=doSth"></script>

iframe + document.domain
在页面中定义一个隐藏iframe，在iframe中通过ajax访问同域的数据
通过document.domain设置为同样的父域名，通过win对象获取iframe中的数据访问
document.domain设置成自身或更高一级的父域，且主域必须相同。因此这种跨域只能在同主域的网页之间

<script>
  // 页面中
  document.domain = 'exam.com';
  var win = document.getElementById('iframe').contentWindow;
</script>
<script>
  // iframe中
  document.domain = 'exam.com';
</script>

window.name + iframe
通过window.name可以保存数据且不会在页面刷新过程中被消除的特性
请求页面将window.name设置为数据

<script type="text/javascript">
  function getData() {
    var iframe = document.getElementById('test');
    iframe.onload = function() {
      var data = iframe.contentWindow.name;
      // 处理数据
    }
    iframe.src = 'test.html'; // 设置成一个和主页面同源的页面就可以
  }
</script>
<iframe src="https://test.com" style="display:none;" onload="getData()"></iframe>

HTML5 postMessage
主要用于几个窗口之间的数据传递（用消息机制传递）
两个窗口能通信的前提是，一个窗口以iframe的形式存在于另一个窗口，或者一个窗口是从另一个窗口通过window.open()或者超链接的形式打开的（同样可以用window.opener获取源窗口）

<iframe id="iframe" src="b.com/index.html"></iframe>
<script type="text/javascript">
  window.onload = function() {
  var iframe = document.getElementById('iframe');
  var targetOrigin = 'http://b.com';
  iframe.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

<script type="text/javascript">
  window.addEventListener('message', function(event){
    // 通过origin属性判断消息来源地址
    if (event.origin == 'http://a.com') {
      alert(event.data);    // 弹出"I was there!"
      }
  }, false);
</script>

CORS(Cross-origin resource sharing)
CORS需要浏览器和服务器同时支持。IE10+
cors详解