什么是跨域？如何实现？

1.什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。

同源策略限制了一下行为：

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去

2.场景

首先狭义的同源就是指，域名、协议、端口均为相同。下面举个例子：

3.如何跨域

3.1.jsonp方式

jsonp跨域是JavaScript设计模式中的一种代理模式。在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的（从js中调用不行），所以我们可以通过这个“漏洞”来进行跨域。一般，我们可以动态的创建script标签，再去请求一个带参网址来实现跨域通信。局限是只能get请求。下面是两种前端实现方式：

 

 

特别注意的是，上面代码里传入的callback参数是服务器传回数据后需要调用的方法，上面代码中方法是callback();

服务器端传回的数据格式应该是 callback(数据)

另外有时会出现406错误，这时候就需要在响应头中添加Access-Control-Allow-Origin,值为*，表示的是允许所有域名访问。

response.setHeader("Access-Control-Allow-Origin", "*");   Jsonp很好用对吧，但只能 get请求。

3.2. 跨域资源共享CORS

这是目前主流的解决方案。

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
对于这个方式，阮一峰老师总结的文章特别好，希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。

通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。

实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。

服务器端在HTTP的响应头中加入（页面层次的控制模式）：

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin

Access-Control-Expose-Headers: Content-Range

Access-Control-Max-Age: 3600

多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。

客户端可以有两种行为：

1. 发送OPTIONS请求，请求Access-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。
2. 直接发送请求，然后检查response的Access-Control信息，如果自己的域名在允许的访问列表中，则读取response body，否则放弃。

本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。

这里我就简单的说一说大体流程。

1. 对于客户端，我们还是正常使用xhr对象发送ajax请求。
   唯一需要注意的是，我们需要设置我们的xhr属性withCredentials为true，不然的话，cookie是带不过去的哦，设置： xhr.withCredentials = true;
2. 对于服务器端，需要在 response header中设置如下两个字段:
   Access-Control-Allow-Origin: http://www.yourhost.com
Access-Control-Allow-Credentials:true
   这样，我们就可以跨域请求接口了。

在django的实际项目中,跨域用CORS技术构建一个中间件，来解决跨域问题：

class CORSMiddleware(MiddlewareMixin): def process_response(self, request, response): """ 解决跨域问题 :param request: :param response: :return: """ # 添加响应头 # 允许你的域名来获取我的数据 response['Access-Control-Allow-Origin'] = "*" # 允许你携带Content-Type请求头 # response['Access-Control-Allow-Headers'] = "Content-Type" # 允许你发送DELETE,PUT # response['Access-Control-Allow-Methods'] = "DELETE,PUT" return response

服务器代理

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

服务器代理是万能的。

document.domain来跨子域

对于主域名相同，而子域名不同的情况，可以使用document.domain来跨域
这种方式非常适用于iframe跨域的情况，直接看例子吧
比如a页面地址为 a.yourhost.com b页面为 b.yourhost.com。
这样就可以通过分别给两个页面设置 document.domain = yourhost.com 来实现跨域。
之后，就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。

使用window.name进行跨域

window.name跨域同样是受到同源策略限制，父框架和子框架的src必须指向统一域名。window.name的优势在于，name的值在不同的页面(或者不同的域名)，加载后仍然存在，除非你显示的更改。并且支持的长度达到2M.

代码如下：

//a页面的代码
<script type="text/javascript"> iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { var data = iframe.contentWindow.name; console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = 'http://m.zhuanzhuan.58.com:8887/b.html'; } }; document.body.appendChild(iframe); </script> 

//b页面代码
<script type="text/javascript"> window.name = "hello"; </script> 

window.location.hash跨域

location.hash方式跨域，是子框架具有修改父框架src的hash值，通过这个属性进行传递数据，且更改hash值，页面不会刷新。但是传递的数据的字节数是有限的。

注意：父子框架受同源策略的限制

代码如下:

//a页面的代码 <script type="text/javascript"> iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { var data = window.location.hash; console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = 'http://m.zhuanzhuan.58.com:8887/b.html'; } }; document.body.appendChild(iframe); </script> //b页面代码 <script type="text/javascript"> parent.location.hash = "world"; </script> 

window.top

window.top方法可以访问最顶层的window对象，可以取到最顶层window对象的属性和方法。这样子框架就可以操作父页面的交互了。window.parent可以得到父框架的window对象。

代码如下：

//a页面代码 <script type="text/javascript"> function funa(){ console.log("a页面的方法"); } iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'http://m.zhuanzhuan.58.com:8887/b.html'; document.body.appendChild(iframe); </script> //b页面的代码 <script type="text/javascript"> console.log(window.top.funa()); function funb(){ console.log("b页面的方法"); } iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'http://m.zhuanzhuan.58.com:8887/c.html'; document.body.appendChild(iframe); </script> //c页面的代码 <script type="text/javascript"> console.log(window.parent.funb()); </script> 

使用postMessage实现页面之间通信

信息传递除了客户端与服务器之前的传递，还存在以下几个问题：

• 页面和新开的窗口的数据交互。
• 多窗口之间的数据交互。
• 页面与所嵌套的iframe之间的信息传递。

window.postMessage是一个HTML5的api，允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了，具体可以参照MDN。

补充： 其实还有一些方法，比如window.name和location.hash。就很适用于iframe的跨域，不过iframe用的比较少了，所以这些方法也就有点过时了。

这些就是我对跨域的了解了，实际情况下，一般用cors，jsonp等常见方法就可以了。不过遇到了一些非常规情况，我们还是需要知道有更多的方法可以选择的。