前端跨域

前端跨域

1. 什么是跨域？

   ​ 违反了同源策略，即只要协议，域名，端口有任何一个不同，就会当作是不同的域，就会产生跨域这个问题。这样做的目的是为了避免引入外部文件而导致浏览器安全问题。但这样的限制野给ajax带来了不少麻烦，所以要通过一些方法使本域的js操纵其它域的对象。

2. 解决跨域的部分常用方法：

   • jsonp跨域

   • CORS(Cross-Origin Resource Sharing)跨域

   • HTML5的postMessage跨域

     jsonp

     • 原理：所有具有src和href的标签都是可以实现跨域的，包括<img> <script>
     • 限制：需要创建一个DOM对象，且只能用于GET方法
     • 优点：兼容性好，在古老的浏览器中也可以运行

     在document.body中添加一个具有src属性的标签后，src属性指向的URL会以GET方法被访问，该访问是可以跨域的。

     var script = document.createElement(“script”);

     script.src = “http://example.com/ex?callback=response“;

     document.body.insertBefore(script , document.body.firstChild);

     • jsonp跨域URL返回的脚本包含一个回调函数

     跨域资源共享（CORS）

     • 原理：服务器端设置Access-Control-Allow-OriginHTTP响应头后，浏览器将允许跨域请求。
     • 实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信
     • 限制：浏览器需要支持html5。
     • 可以支持POST，GET，PUT等请求方法。

     Access-Control-Allow-Origin:*; //允许所有域名访问
     Access-Control-Allow-Origin:"http://example.com"   //只允许该域名访问

     window.postMessage（目前没用过*_*）

     • 原理：HTML5允许窗口之间发送消息
     • 浏览器需要支持HTML5，获取窗口句柄后才能相互通信

     window.onload = function(){
     var ifr = document.getElementById("ifr");
     var targetOrigin = "http://www.example.com";
     ifr.contentWindow.postMessage("hello",targetOrigin);
     };

     使用方法：

     ​ otherWindow.postMessage(message , targetOrigin);

     • otherWindow:指目标窗口，也就是给哪个window发消息，是window.frames属性的成员或者是由window.open方法创建的窗口
       
       • message:发送的消息，string或者object
       • targetOrigin:限定接收消息的范围，不限定使用*
       • 接受页面通过监听message事件接受消息

     window.addEventListener("message",function(event){
     console.log(event.data);
     console.log(event.origin);   
     console.log(event.source);   //源window对象
     });

     ​

   ​