常用跨域方法实践(一)
这几天看了鬼道师兄的《跨终端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优缺点:
优点:它不像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优缺点:
优点:支持所有类型的HTTP请求;使用普通的XMLHttpRequest发起请求和获得数据,拥有良好的出错处理
缺点:老式浏览器不支持
结语
测试源码请戳这!下面一篇文章将介绍document.domain、URL.hash、cross-fragment、window.name和postMessage这五种方式的跨域实现。
参考
建议继续学习:
- JSONP与POST方式请求 (阅读:10355)
- JSON和JSONP的区别 (阅读:7664)
- 优雅绝妙的Javascript跨域问题解决方案 (阅读:6733)
- jQuery中getJSON跨域原理详解 (阅读:5613)
- 跨域请求的iframe解决方案(1) (阅读:5385)
- ajax-cross-domain (阅读:4981)
- 利用跨域资源共享(CORS)实现ajax跨域调用 (阅读:4144)
- 研究ext发现ajax跨域实现 (阅读:3733)
- 三谈Iframe自适应高度 (阅读:3626)
- Ajax和WEB服务数据格式:JSON JSONP (阅读:3506)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:chenjun 来源: 风影博客
- 标签: CORS JSONP 跨域
- 发布时间:2016-02-20 16:46:18
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成