跨域以及跨域的几种方式

讲解跨域之前我们先来看看什么是同源策略

什么是同源策略

通常来说，浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不许读写对方的资源，
本域指的是
－同协议：比如都是http或者https
－同域名：比如都是http://baidu.com/a和http://baidu.com/b
－同端口：比如都是80端口

同源:

http://baidu.com/a/b.js 和http://baidu.com/index.php

不同源:

http://baidu.com/main.js 和https://baidu.com/a.php (协议不同)
http://baidu.com/main.js和 http://bbs.baidu.com/a.php(域名不同，域名必须完全相同才可以)
http://baidu.com/main.js 和 http://baidu.com:8080/a.php(端口不同,第一个是80)

***需要注意的是: 对于当前页面来说页面存放 JS 文件的域不重要，重要的是加载该该JS的页面所在什么域 **

什么是跨域？跨域有几种实现形式

跨域就是实现不同域的接口可以进行数据交互

• JSONP----JSONP 的原理是什么
  html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。不过需要后端支持。
  web页面中，通过script标签获取js代码可以进行跨域，我们可以动态的创建script标签，设置src属性指向我们请求资源的url地址，然后放到head标签中。这样就可以把不同域的数据加载到本域名下，不过需要后端支持jsonp，也就是通过前端的url中的callback参数动态的生成回调函数名，通过传参的形式执行获取到的数据，这样的话，前端预定义好的函数就可以让传来的数据自动运行。

• CORS

  CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。CORS兼容IE10+ 。

  

  CORS

  CORS是AJAX跨域请求的一种方式，目前只支持IE10以上浏览器，具体兼容如下图

  

  postMessage()

  window.postMessage()是HTML5的新方法，可以使用它来向其它的window对象发送数据，无论这个window对象是属于同源或不同源，IE8+支持。