跨域产生的原因和解决方法

跨域产生的原因是因为浏览器的同源限制，是浏览器的一种安全机制。跨域解决的方法有：1、cookie；2、DOM获取；3、JSONP；4、WebSocket；5、CORS（跨域资源共享）；6、使用代理服务器；7、文档域 + iframe 跨域；8、location.hash + iframe跨域；9、window.name + iframe跨域；10、postMessage跨域。

一、跨域产生的原因

跨域是是因为浏览器的同源策略限制，是浏览器的一种安全机制，服务端之间是不存在跨域的。

同源策略：

• 协议相同
• 域名相同
• 端口相同

同源策略目的：保证用户信息安全，防止恶意网站窃取数据。同源策略是必须的，否则cookie可以共享。

二、跨域的解决方法

1、cookie

设置document.domain共享cookie。

2、DOM获取

（父子页面通信）H5引入了一个API，这个API为windows对象新增了一个window.postMessage方法，允许跨窗口通信，无论这两个窗口是否同源。

3、JSONP

JSONP是服务器无客户端跨源通信的常用方法。基本思想是网页通过添加一个标签，向服务器请求json数据，这种做法不受同源政策的限制，服务器收到请求后，将数据放在一个指定名字的回调函数里面传回来。（只能发GET请求）</p>

4、WebSocket

WebSocket是一种通信协议。使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

5、CORS（跨域资源共享）

CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

6、使用代理服务器

使用代理方式跨域更加直接，因为同源限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了：

• 把访问其它域的请求替换为本域的请求；
• 服务器端的动态脚本负责将本域的请求转发成实际的请求；
• 为了通过Ajax从http://localhost:8080访问http://localhost:8081/api，可以将请求发往http://localhost:8080/api；
• 然后利用Apache Web/Nginx 服务器的Reverse Proxy功能做如下配置：ProxyPass /api http://localhost:8081/api。

7、文档域 + iframe 跨域

此方法只能在辅助域名相同时使用，例如a.test COM和b.test Com适用于此方法。您只需要添加文档即可。XML 到页面域 =’test。“com”是指如果辅助域名相同，可以实现跨域。

8、location.hash + iframe跨域

实现原则：如果a想跨域与b通信，则通过中间页c实现。三个页面，使用iframe位置在不同域之间散列值转移，直接js访问相同的字段之间进行通信。

具体实现方式：域a：a.html->域B：b.html->域a：c.html。A和B的不同域只能通过哈希值进行一种方式通信，而B和C的不同域只能通过一种方式进行通信，但C和A位于同一域中，因此C可以通过父级进行通信 父级访问页面上的所有对象。

9、window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

中间代理页，与a.html同域，内容为空即可。

10、postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递
• 上面三个场景的跨域数据传递