常见的跨域方式及原理-第二篇

四、html5中的window.postMessage(message,targetOrigin)
跨域原理：调用postMessage方法的对象是指要接收消息的那个对象，该方法被调用时，将分发一个消息事件，该方法的第一个参数为要发送的消息，类型只能为字符串，第二个参数用来限定接收消息的那个windoe对象所在的域，如果不想限定域，可以用通配符*；
需要接收消息的window对象，通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

示例：

结果：

注意：ie6,7不支持

---

五、CORS
跨域原理：使用自定义的http头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

浏览器支持情况：
Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+

Chrome，Firefox，Opera和Safari都使用XMLHttpRequest2对象。 Internet Explorer使用了类似的XDomainRequest对象，其工作原理和XMLHttpRequest大致相同，但增加了额外的安全预防措施。

示例：
访问页面：cors_test.ejs

// 创建XHR 对象.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // 不支持CORS.
    xhr = null;
  }
  return xhr;
}

// 发起CORS请求
function makeCorsRequest() {
  var url = 'http://www.otherapp.com/cors_data';
  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    alert('CORS not supported!');
    return;
  }

  // 响应处理
  xhr.onload = function() {
    var text = xhr.responseText;
    alert(text);
  }
  xhr.onerror = function() {
    alert('Woops, there was an error making the request.');
  }

  xhr.send();
}

makeCorsRequest();

后台路由：index.js

/* CORS Test */

router.get('/cors_test', function(req, res) {  
  res.render('cors/cors_test');
});

router.get('/cors_data', function(req, res) {  
  var data = { name: "chenjun", age: "25" };
  // 设置响应头
  res.setHead('Access-Control-Allow-Origin', '*');
  res.end(JSON.stringify(data));

CORS优缺点：
优点：支持所有类型的HTTP请求；使用普通的XMLHttpRequest发起请求和获得数据，拥有良好的出错处理
缺点：老式浏览器不支持