技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 其他 --> 常用跨域方法实践(一)

常用跨域方法实践(一)

浏览:2409次  出处信息

这几天看了鬼道师兄的《跨终端Web》这本书,该书从解决实际业务出发,讲述了跨终端的优势与未来,受益良多。其中,书中第九章介绍了作者在阿里内部的一个参赛作品Storage,该作品巧妙的使用了跨域知识,让我见识到跨域其实不仅仅是JSONP。以前,对前端跨域这块或多或少有点了解,但真正动手实践的不是很多。于是,这段时间我好好整理了常用跨域方法的具体实现。本文,主要介绍了JSONP和CORS的实现方式。

相关概念:

  • 只要协议、域名、端口有任何一个不同,都被当作是不同的域

  • JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象

  • 跨域简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象

  • 注意:

  • 如果是协议和端口造成的跨域问题“前台”是无能为力的

  • 在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上(“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”)

相关配置:为了演示效果,在hosts文件里面添加如下内容

127.0.0.1 www.myapp.com  
127.0.0.1 sample.myapp.com  
127.0.0.1 www.otherapp.com  

注意:测试demo基于NodeJS的Express4.X框架,且端口设置为80

JSONP

JSONP也叫填充式JSON,是应用JSON的一种新方法,只不过是被包含在函数调用中的JSON(如:callback({"name", "chenjun"});)。JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据

跨域原理:利用<script>标签没有跨域限制,实现跨域目的

访问页面:jsonp_test.ejs

  <script>
    function dosomething(jsondata) {
      alert(jsondata.name + " " + jsondata.age);
    }
  </script>
  <script src="http://www.otherapp.com/jsonp_data?callback=dosomething"></script>

后台路由:index.js

/* JSONP Test */
router.get('/jsonp_test', function(req, res) {  
  res.render('jsonp/jsonp_test');
});

router.get('/jsonp_data', function(req, res) {  
  var callback = req.query.callback;
  var data = { name: "chenjun", age: "25" };
  var str =  callback + '(' + JSON.stringify(data) + ')'; //jsonp
  res.end(str);
});

效果:jsonp-test

JSONP优缺点:

  • 优点:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行;并且在请求完毕后可以通过调用callback的方式回传结果

  • 缺点:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JS调用的问题

CORS

CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。

跨域原理: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

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-test

CORS优缺点:

  • 优点:支持所有类型的HTTP请求;使用普通的XMLHttpRequest发起请求和获得数据,拥有良好的出错处理

  • 缺点:老式浏览器不支持

结语

测试源码请戳这!下面一篇文章将介绍document.domain、URL.hash、cross-fragment、window.name和postMessage这五种方式的跨域实现。

参考

建议继续学习:

  1. JSONP与POST方式请求    (阅读:10355)
  2. JSON和JSONP的区别    (阅读:7664)
  3. 优雅绝妙的Javascript跨域问题解决方案    (阅读:6733)
  4. jQuery中getJSON跨域原理详解    (阅读:5613)
  5. 跨域请求的iframe解决方案(1)    (阅读:5385)
  6. ajax-cross-domain    (阅读:4981)
  7. 利用跨域资源共享(CORS)实现ajax跨域调用    (阅读:4144)
  8. 研究ext发现ajax跨域实现    (阅读:3733)
  9. 三谈Iframe自适应高度    (阅读:3626)
  10. Ajax和WEB服务数据格式:JSON JSONP    (阅读:3506)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1