#HTML5 & JS TIPS# 合法解决纯JS+HTML5前端简单跨域与复杂跨域问题
来源:互联网 发布:linux系统 便携 编辑:程序博客网 时间:2024/05/17 22:13
转载自:http://www.flextheworld.com/2013/01/html5-js-crossdomain.html
随着云端技术的不断发展与普及,越来越多的团队或公司开始将应用开发的注意力转移到前端。当下最大的前端市场无疑是移动应用。但随着HTML与JS技术的不断发展,纯JavaScript + HTML5 的web应用数量也在不断增长。这就引发出在以往网站中不太会出现的情况。 JS跨域问题,因为纯JS前端并不一定和后端服务在同一台设备上,或者说他们也许并不通过同一域名访问,因为你的后端也许只是一个云服务。而你的前端也许正部署在一个使用者(开发者)的设备上。而目前所有的浏览器都不会允许你从域名abc向域名xyz发起AJAX访问。
这其实是一个老问题,不过如果你在google里搜索一下 “jQuery跨域” 或者”js跨域”会发现大多数的内容只是一个workaround,并不是真正“合法”的解决跨域问题。如果熟悉其他前端技术比如Flash, Sliverlight的朋友会知道,用Flash开发前端,如果需要跨域,需要在服务器端配置一个crossdomain.xml文件用于描述允许哪些域名可以跨域访问本服务器,这就是所谓的“合法授权”。
而如果你搜索了上面提到的关键字,会发现一半的网站告诉你用getJSON解决跨域,另外一些提到iframe,proxy等其他一些办法,好吧,这些都只是在浏览器允许的范围内,从一些并不真正提供API的网站获取内容的办法。这与我们上面提到的corssdomain.xml文件授权有本质区别,那如何让你的网站可以提供API供外部Web应用使用呢?在HTML5环境下,我们有了合法的解决方式
方法很简单,我们提供的跨域API服务会有两种情况,简单跨域以及复杂跨域(暂且叫复杂跨域吧)
我们先来说简单跨域
实现方法和crossdomain.xml类似,需要对外网域名授权,这样JavasScript的ajax操作就可以跨域访问服务器提供的API服务:
1. 服务器端在Response的header中需要加入下面几句
Access-Control-Allow-Origin: * //(*代表所有网站,可以设置特定网站如:http://www.xxx.com)
Access-Control-Request-Method: POST, GET, PUT, DELETE //允许跨域使用的方法
Access-Control-Request-Headers: Authorization, Content-Type, xxxxxx (XXX代表自定义Header)
2. Done. 第一步就可以了,当服务器API在Response的Header中包括上面3句的话,客户端就可以对服务器进行跨域访问了。
复杂跨域
所谓复杂跨域是相对简单跨域而言,当服务器对外提供API云服务时,往往需要进行用户验证。当使用HTTP AUTHORIZATION 验证方式时,我们可以说这种情况是复杂跨域,因为每一个客户端的Request实际包含两个Request( Preflight Request 和 Real Request.),当进行用户验证时,在真正的Request发出之前,浏览器会发出一个类型为OPTIONS的Request,如果服务器没有正确处理这个请求,那么跨域访问还是会失败。解决方法很简单,增加两行代码。
除了简单跨域时需要添加的几个header以外,添加下面的代码来处理OPTIONS Request。我以PHP代码为例:
if ($_SERVER['REQUEST_METHOD'] == ‘OPTIONS’) {
header(‘Access-Control-Allow-Origin: *’);
header(‘Access-Control-Allow-Headers: Authorization,Content-Type’);
exit;
}
当收到OPTIONS请求时,需要告诉浏览器,服务器API允许带有Authorization请求。
相关链接: Using Cros – HTML5 Rocks(http://www.html5rocks.com/en/tutorials/cors/)
- #HTML5 & JS TIPS# 合法解决纯JS+HTML5前端简单跨域与复杂跨域问题
- html5 JS跨域通信
- HTML5解决跨域问题
- html5的postmessage实现js前端跨域访问及调用解决方案
- html5的postmessage实现js前端跨域访问及调用解决方案
- 前端跨域html5方法
- 简单的解决js跨域问题
- 前端规范(html5,js)
- 纯HTML5+JS制作 物理 拖拽 山地车~!
- 纯HTML5+JS+PHP批量上传
- 【js】Jsonp解决js跨域问题
- 【js学习笔记-116】-----html5之跨域消息传递
- webView加载Html5按钮,JS不能调用问题的解决
- 如何解决HTML5页面js,css缓存问题
- 利用HTML5,前端js实现图片压缩
- 利用HTML5,前端js实现图片压缩
- HTML5+JS+CSS3前端积累(一)
- HTML5+JS+CSS3前端积累(二)
- eclipse各种快捷键的使用方法
- 吐槽iOS国际化:关于NSLocalizedString的使用
- 两年前写的:HBase性能深度分析
- sqlserver中创建登陆用户并赋予权限
- Java学习整理系列之Java动态代理
- #HTML5 & JS TIPS# 合法解决纯JS+HTML5前端简单跨域与复杂跨域问题
- java采集网页数据方法【多线程数据采集之一】
- 一个MapReuce作业的从开始到结束--第4章 DataNode节点启动分析
- SVN服务器搭建和使用(一)
- 转载 在C++中如何实现文件的读写?
- java+Jsoup 正则过滤html网页标签【多线程数据采集之二】
- Android 4.2 Input 流程分析
- Posix多线程编程学习笔记
- hibernate4.0中SessionFactory的创建