总结跨域的几种方式

跨域整理
@(前端笔记)

跨域

只要协议、域名、端口有任何一个不一样，都被看成是不一样的域。
因为浏览器的同源策略，其限制之一是不能经过ajax的方法情趣请求不一样源的文档。第二个限制是浏览器中不一样域的框架(iframe)间是不能进行js的交互操做的。

一、经过document.domain跨域

修改document.domain的方式只适用于不一样子域的框架间的交互。

二、经过location.hash跨域

由于父窗口能够对iframe进行URL读写，iframe也能够读写父窗口的URL，URL有一部分被称为hash，就是#号及其后面的字符，它通常用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程当中不会携带hash，因此这部分的修改不会产生HTTP请求，可是会产生浏览器历史记录。此方法的原理就是改变URL的hash部分来进行双向通讯。每一个window经过改变其余 window的location来发送消息（因为两个页面不在同一个域下IE、Chrome不容许修改parent.location.hash的值，因此要借助于父窗口域名下的一个代理iframe），并经过监听本身的URL的变化来接收消息。这个方式的通讯会形成一些没必要要的浏览器历史记录，并且有些浏览器不支持onhashchange事件，须要轮询来获知URL的改变，最后，这样作也存在缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等。

三、 经过HTML5的postMessage方法跨域

高级浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。这个功能主要包括接受信息的"message"事件和发送消息的"postMessage"方法。好比damonare.cn域的A页面经过iframe嵌入了一个google.com域的B页面，能够经过如下方法实现A和B的通讯

四、经过jsonp跨域

以上几种都是双向通讯的，即两个iframe，页面与iframe或是页面与页面之间的，下面说几种单项跨域的（通常用来获取数据），由于经过script标签引入的js是不受同源策略的限制的。因此咱们能够经过script标签引入一个js或者是一个其余后缀形式（如php，jsp等）的文件，此文件返回一个js函数的调用。

JSONP的优缺点

• SONP的优势是：
  它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中均可以运行，不须要XMLHttpRequest或ActiveX的支持；而且在请求完毕后能够经过调用callback的方式回传结果。
• JSONP的缺点则是：

它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种状况，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题。

五、经过CORS跨域

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功仍是失败。目前，全部浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。

• CORS与JSONP的对比

  • JSONP只能实现GET请求，而CORS支持全部类型的HTTP请求。
  • 使用CORS，开发者可使用普通的XMLHttpRequest发起请求和得到数据，比起JSONP有更好的错误处理。
  • JSONP主要被老的浏览器支持，它们每每不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。