前端实现跨域方法总结

一、同源策略

1、同源

指两个页面的协议、端口和域名都相同，则两个页面是具有相同的源

2、同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。

3、不受同源策略限制的有哪些

• script标签嵌入跨域脚本。语法错误信息只能被同源脚本中捕捉到。
• link 标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的 HTTP 头部 Content-Type 。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。
• 通过 img 展示的图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,…
• 通过 video 和 audio 播放的多媒体资源。
• 通过 object、 embed 和 applet 嵌入的插件。
• 通过 font-face 引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。
• 通过 iframe 载入的任何资源。站点可以使用 X-Frame-Options 消息头来阻止这种形式的跨域交互

  二、前端跨域方法

  1、iframe + document.domain
  使用ducument.domain实现跨域必须满足以下几点：
• 这两个域名必须属于同一个基础域名
• 所用的协议，端口都要一致

在a页面中 xxx.test.com中嵌套b页面（yy.xx.test.com）
此时a和b页面不是同源的，iframe中的b页面如果想取a页面中的某个参数是涉及到跨域问题，因此可以将两个页面的domain都设置成test.com
即：a和b页面都添加：document.domain = ‘test.com’

2、jsonp实现跨域请求
原理：因为script标签不受同源策略的限制，因此在访问接口时服务端可以返回一个script标签内嵌入内容，但是常用的jquery的jsonp来实现跨域请求，jquery将JSONP方法进行了封装，使用JQuery提供的方法变得非常简单

<script type="text/javascript">
    $.ajax({ 
     type: "get",
     async: false, 
     url: "http://localhost:8546/Service.ashx", 
     dataType: "jsonp", 
    success: function (data) { 
       alert(data);
      }, 
    error: function () { 
       alert('fail');
     } 
   }); 
</script>

3、iframe + postMessage

postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。其是h5特性，可以安全地实现跨源通信

语法：

otherWindow.postMessage(message, targetOrigin, [transfer])// 向指定的窗口发送消息

- otherWindow：他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
- message：将要发送到其他 window的数据
- targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI

window.addEventListener("message", receiveMessage, false); // 其他窗口可以监听分发的message