浏览器的跨域问题以及解决方案(转载)

1) 片段识别符#

• 片段识别符指的是，URL的#号后面的部分，比如http://qq.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面将不会重新刷新、父窗口可以把信息，写入子窗口的片段标识符。

1
var src = originURL+'#'+data;
2
document.getElementById('iframe').src = src;

• 子窗口通过监听hashchange事件得到通知

1
window.onhashchange = checkMessage;
2
  function checkMessage(){
3
  var message = window.location.hash;
4
  //...
5
 }

• 同样的，子窗口也可以改变父窗口的片段标识符。

1
parent.location.href = target+"#"+hash;

2) window.name#

• 浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置这个属性，后一个网页就可以读取它。
• 父窗口先发开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。

1
window.name = data;

• 接着，子窗口跳回一个与主窗口同域的网址。

1
location = 'http://parent.url.com/xxx.html';

• 然后，主窗口就可以读取子窗口的window.name了。

1
var data = document.getElementById('iframe').contentWindow.name;

3) 跨文档消息传输window.postMessage#

• 上面两种方法都属于破解，HTML5为解决这个问题，引入一个全新的API：跨文档消息传输Cross Document Messaging。
• 下一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。
• Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。

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

1
<script type="text/javascript">
2
    window.addEventListener('message', function(event){
3
        // 通过origin属性判断消息来源地址
4
        if (event.origin == 'http://a.com') {
5
            alert(event.data);    // 弹出"I was there!"
6
            alert(event.source);  // 对a.com、index.html中window对象的引用
7
                                  // 但由于同源策略，这里event.source不可以访问window对象
8
        }
9
    }, false);
10
</script>

1) JSONP解决AJAX跨域问题#

• JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
• 它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
• 首先，网页动态插入<script>元素，由它向跨源网址发出请求。

1
function addScriptTag(src) {
2
  var script = document.createElement('script');
3
  script.setAttribute("type","text/javascript");
4
  script.src = src;
5
  document.body.appendChild(script);
6
}
7

8
window.onload = function () {
9
  addScriptTag('http://example.com/ip?callback=foo');
10
}
11

12
function foo(data) {
13
  console.log('Your public IP address is: ' + data.ip);
14
};

• 上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。
• 服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

1
foo({
2
  "ip": "8.8.8.8"
3
});

• 由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

2) 通过webSocket解决AJAX跨域#

• WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
• 下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

1
GET /chat HTTP/1.1
2
Host: server.example.com
3
Upgrade: websocket
4
Connection: Upgrade
5
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
6
Sec-WebSocket-Protocol: chat, superchat
7
Sec-WebSocket-Version: 13
8
Origin: http://example.com

• 上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。 正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。

1
HTTP/1.1 101 Switching Protocols
2
Upgrade: websocket
3
Connection: Upgrade
4
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
5
Sec-WebSocket-Protocol: chat

3) 通过CORS解决AJAX跨域#

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

1
var xhr = new XMLHttpRequest();
2
xhr.open("GET", "http://blog.csdn.net/hfahe", true);
3
xhr.send();

1
function createCORSRequest(method, url) {
2
  var xhr = new XMLHttpRequest();
3
  if ("withCredentials" in xhr) {
4
    // 此时即支持CORS的情况
5
    // 检查XMLHttpRequest对象是否有“withCredentials”属性
6
    // “withCredentials”仅存在于XMLHTTPRequest2对象里
7
    xhr.open(method, url, true);
8
  } else if (typeof!= "undefined") {
9
    // 否则检查是否支持XDomainRequest，IE8和IE9支持
10
    // XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式
11
    xhr = new XDomainRequest();
12
    xhr.open(method, url);
13
  } else {
14
    // 否则，浏览器不支持CORS
15
    xhr = null;
16
  }
17
  return xhr;
18
}
19

20
var xhr = createCORSRequest('GET', url);
21
if (!xhr) {
22
  throw new Error('CORS not supported');
23
}