什么是跨域？如何解决跨域问题？

Question

一、概述

1.1 含义

同源策略

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

举例来说，http://www.example.com/dir/page.html 这个网址，协议是 http://，域名是 www.example.com，端口是 80（默认端口可以省略）。它的同源情况如下。

• http://www.example.com/dir2/other.html：同源
• http://example.com/dir/other.html：不同源（域名不同）
• http://v2.www.example.com/dir/other.html：不同源（域名不同）
• http://www.example.com:81/dir/other.html：不同源（端口不同）

1.2 目的 主要是防止 csrf 攻击

1.3 限制范围 随着互联网的发展，"同源政策"越来越严格。目前如果非同源，共有三种行为受到限制。

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM 无法获得。
• AJAX 请求不能发送。

二、Cookie

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 Cookie。

举例来说，A网页是 http://w1.example.com/a.html，B网页是 http://w2.example.com/b.html，那么只要设置相同的 document.domain，两个网页就可以共享 Cookie。

document.domain = 'example.com';

现在A网页通过脚本设置一个 Cookie。

document.cookie = "test1=hello";

B网页就可以读到这个 Cookie。

var allCookie = document.cookie;

注意，这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的 PostMessage API。

另外，服务器也可以在设置 Cookie 的时候，指定 Cookie 的所属域名为一级域名，比如 .example.com。

Set-Cookie: key=value; domain=.example.com; path=/

这样的话，二级域名和三级域名不用做任何设置，都可以读取这个 Cookie。

三、iframe

如果两个网页不同源，就无法拿到对方的 DOM。典型的例子是 iframe 窗口和 window.open 方法打开的窗口，它们与父窗口无法通信。比如，父窗口运行下面的命令，如果 iframe 窗口不是同源，就会报错。

document.getElementById("myIFrame").contentWindow.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

上面命令中，父窗口想获取子窗口的 DOM，因为跨源导致报错。反之亦然，子窗口获取主窗口的 DOM 也会报错。

window.parent.document.body
// 报错

如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的 document.domain 属性，就可以规避同源政策，拿到 DOM。

对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

• 片段识别符（fragment identifier）
• window.name
• 跨文档通信 API（Cross-document messaging）

3.1 片段识别符 片段标识符（fragment identifier）指的是，URL 的 # 号后面的部分，比如 http://example.com/x.html#fragment 的 #fragment。如果只是改变片段标识符，页面不会重新刷新。

父窗口可以把信息，写入子窗口的片段标识符。

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;

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

window.onhashchange = checkMessage;

function checkMessage() {
  var message = window.location.hash;
  // ...
}

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

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

3.2 window.name 浏览器窗口有 window.name 属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入 window.name 属性。

window.name = data;

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

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

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

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

这种方法的优点是，window.name 容量很大，可以放置非常长的字符串；缺点是必须监听子窗口 window.name 属性的变化，影响网页性能。

3.3 window.postMessage 上面两种方法都属于破解，HTML5 为了解决这个问题，引入了一个全新的 API：跨文档通信 API（Cross-document messaging）。

这个 API 为 window 对象新增了一个 window.postMessage 方法，允许跨窗口通信，不论这两个窗口是否同源。

举例来说，父窗口 http://aaa.com 向子窗口 http://bbb.com 发消息，调用 postMessage 方法就可以了。

var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com');

postMessage 方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即 协议 + 域名 + 端口。也可以设为*，表示不限制域名，向所有窗口发送。

子窗口向父窗口发送消息的写法类似。

window.opener.postMessage('Nice to see you', 'http://aaa.com');

父窗口和子窗口都可以通过 message 事件，监听对方的消息。

window.addEventListener('message', function(e) {
  console.log(e.data);
},false);

message 事件的事件对象 event，提供以下三个属性。

• event.source：发送消息的窗口
• event.origin：消息发向的网址
• event.data：消息内容

下面的例子是，子窗口通过 event.source 属性引用父窗口，然后发送消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  event.source.postMessage('Nice to see you!', '*');
}

event.origin 属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  if (event.origin !== 'http://aaa.com') return;
  if (event.data === 'Hello World') {
    event.source.postMessage('Hello', event.origin);
  } else {
   console.log(event.data);
  }
}

3.4 LocalStorage 通过 window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。

下面是一个例子，主窗口写入iframe子窗口的 localStorage。

window.onmessage = function(e) {
  if (e.origin !== 'http://bbb.com') {
   return;
  }
  var payload = JSON.parse(e.data);
  localStorage.setItem(payload.key, JSON.stringify(payload.data));
};

上面代码中，子窗口将父窗口发来的消息，写入自己的 LocalStorage。

父窗口发送消息的代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
win.postMessage(JSON.stringify({key: 'storage', data: obj}), 'http://bbb.com');

加强版的子窗口接收消息的代码如下。

window.onmessage = function(e) {
  if (e.origin !== 'http://bbb.com') return;
  var payload = JSON.parse(e.data);
  switch (payload.method) {
   case 'set':
    localStorage.setItem(payload.key, JSON.stringify(payload.data));
    break;
   case 'get':
    var parent = window.parent;
    var data = localStorage.getItem(payload.key);
    parent.postMessage(data, 'http://aaa.com');
    break;
   case 'remove':
    localStorage.removeItem(payload.key);
    break;
  }
};

加强版的父窗口发送消息代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;
var obj = { name: 'Jack' };
// 存入对象
win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');
// 读取对象
win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
window.onmessage = function(e) {
  if (e.origin != 'http://aaa.com') return;
  // "Jack"
  console.log(JSON.parse(e.data).name);
};

四、AJAX

同源政策规定，AJAX 请求只能发给同源的网址，否则就报错。

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

• JSONP
• WebSocket
• CORS

4.1 JSONP JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个 <script> 元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如果对于callback参数如何使用还有些模糊的话，我们后面会有具体的实例来讲解。

首先，网页动态插入 <script> 元素，由它向跨源网址发出请求。

<h1>绕过浏览器禁止跨域请求的方案之八——JSONP</h1>
  <button id="bt1">请求数据</button>
  <script src="jquery-1.11.3.js"></script>
  <script>
    //声明静态函数 —— 客户端不直接调用
    function doRes(data){
     console.log('开始处理服务器端返回的数据')
     console.log(data);
    }

    $('#bt1').click(function(){
     //动态创建一个SCRIPT标签，添加到DOM
     var s = document.createElement('script');
     s.setAttribute('async', 'true'); //脚本异步执行
     s.src = 'http://localhost/crossdomain/4.php?callback=doRes';
     document.body.appendChild(s);
     //OM树上追加了新的SCRIPT,浏览器就
     //会立即请求该资源并执行服务器返回的JS

    })

上面代码通过动态添加 <script> 元素，向服务器 http://localhost/crossdomain/4.php 发出请求。注意，该请求的查询字符串有一个 callback 参数，用来指定回调函数的名字，这对于 JSONP 是必需的。

2.基于 jQuery 的跨域

jQuery 发起跨域请求，有两种方法：

 $.getJSON()

XHR非跨域请求：

$.getJSON('x.php', function(){})

SCRIPT 实现 JSONP 请求

$.getJSON('跨域地址/x.php?callback=?', function(){})

 $.ajax()

XHR 非跨域请求：

$.ajax({url: '跨域地址/x.php',dataType:'jsonp',success: function(){ ... }})

demo1 如下：

<h1>jQuery.getJSON与跨域请求</h1>
  <button id="bt1">请求数据(非跨域)</button>
  <button id="bt2">请求数据(跨域)</button>
  <script src="jquery-1.11.3.js"></script>
  <script>
    $('#bt1').click(function(){
     //XHR非跨域
     $.getJSON('5-1.php', function(data){
      console.log('1 处理服务器返回的数据')
      console.log(data);
     })
    });

    $('#bt2').click(function(){
     //XHR跨域 —— 浏览器禁止
     // $.getJSON('http://localhost/crossdomain/5-1.php?', function(data){
     //  console.log('2 处理服务器返回的数据')
     //  console.log(data);
     // })

     $.getJSON('http://localhost/crossdomain/5-2.php?callback=?',function(data){
      console.log('3 处理服务器返回的数据')
      console.log(data);
     })
    });
  </script>

jQuery 在处理 jsonp 类型的 ajax 时（还是忍不住吐槽，虽然 jquery 也把 jsonp 归入了 ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供 success 属性方法来调用。

在服务器端，代码如下：

<?php
 //header('Content-Type: application/json');
 header('Content-Type: application/javascript');
 sleep(10);  //让当前解释器暂停执行10s
 $cb = $_REQUEST['callback'];
 $data = [
  'ename'=>'Tom',
  'age'=>20
 ];
 echo  $cb. '(' .json_encode($data) . ')';

demo2 如下：

<h1>jQuery.ajax与跨域请求</h1>
  <button id="bt1">请求数据(非跨域)</button>
  <button id="bt2">请求数据(跨域)</button>
  <script src="jquery-1.11.3.js"></script>
  <script>
   $('#bt1').click(function(){
    //XHR非跨域
    $.ajax({
      url: '6-1.php',
      success: function(){}
    })
   });

   $('#bt2').click(function(){
    $.ajax({
      url: 'http://localhost/crossdomain/6-2.php',
      dataType: 'jsonp',  //指定响应消息的数据类型
      success: function(data){
       console.log('4 开始处理响应数据')
       console.log(data);
      }
    });
   });