浏览器跨域问题解决方案汇总

本文在参考大神的文章基础上，简略地做了总结，关于浏览器跨域问题的几种方案，便于自己在以后工作学习过程查阅，只是概念和方案的概览，详细实践方案可以参考原文链接，或百度、google具体实现。在此，感谢大神们的贡献。

---

1.为什么会有浏览器跨域问题

出于安全性考虑，各个浏览器厂商，实现了同一域名下，不能访问别的域名下的脚本，cookie等等，即：同源策略；但是，实际开发中又不可避免，在同一域名下访问其他域名下的资源，所以，就产生了浏览器跨域问题的解决方案。

2.域的理解

只有，协议，域名，端口号，三者都相同，才能算是同一个域，否则，都是不同域。

3.什么是同源策略

通俗的讲,同一域名下的资源是可以互相访问的，不同域名下的资源是不可以访问的；同源策略的目的是为了保证用户信息的安全。防止恶意的网站盗取数据。目前，如果非同源，共有三种行为受到限制。
（1）Cookie、LocalStorage和IndexDB无法获取。
（2）DOM无法获得。
（3）AJAX请求不能发送。

4. 常见几种解决浏览器跨域方案

(1) document.domain+iframe的解决方案(仅适用于，主域名相同的场景)
(2) 通过script元素的src属性，不受同源策略的限制，可以访问不同域的脚本特性。
(3) location.hash + iframe
(4) window.name + iframe

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

(5) postMessage（HTML5中的XMLHttpRequest Level 2中的API）

<iframe id="ifr" src="b.com/index.html"></iframe><script type="text/javascript">window.onload = function() {    var ifr = document.getElementById('ifr');    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样                                        // 若写成'http://c.com'就不会执行postMessage了    ifr.contentWindow.postMessage('I was there!', targetOrigin);};</script>

(6) CORS
CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
(7) Ajax的jsonp技术实现
(8) web sockets

web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
web sockets原理：在js创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
只有在支持web socket协议的服务器上才能正常工作。
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
var data = event.data;
}

(9)服务器端实现
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

1. 参考文章1

2. 参考文章2

3. 参考文章3
4. 参考文章4