CORS(Cross-Origin Resource Sharing) 跨域资源共享
CORS
全称:Cross-Origin Resource Sharing
中文意思:跨域资源共享?
好吧,目前中文方面的资料还比较少,能搜索到的那仅有的几篇相关介绍,也几乎是雷同的。
最近工作上也有用到CORS的地方,随便做点分享吧,也当是笔记。
大家也知道,XMLHttpRequest接口是Ajax的根本,而Ajax考虑到安全性的问题,是禁止跨域访问资源的。
也就是说:www.a.com的页面无法通过Ajax来调用www.b.com的资源。
很多人又会说,但jQuery的$.ajax()明明就可以跨域访问啊!
对,的确是跨了,但那是jsonp!关于jsonp的介绍也很多了,这里不扯。
其实jQuery的$.ajax()方法中,也可以实现CORS,只要服务器端配合,跨域就不需要使用jsonp。
CORS是XMLHttpRequest Level 2中新增加的功能
支持情况如下
支持情况还算良好(假如无视IE的话)。
移动端的开发,除了Opera Mini还不支持,其他设备的版本支持情况也很好。
好了,下面进入实战,直接说说使用方法。
1 var xhr = new XMLHttpRequest(); 2 xhr.open("POST", "http://www.b.com", true); 3 xhr.send();
没有看错!就是这么简单!
和Ajax的调用方法是毫无差异的,需要的只是服务器端的配合。
服务器端如何配置?
PHP:只需要使用如下的代码设置即可。
1 <?php 2 header("Access-Control-Allow-Origin:*");
以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。
当然,这样有很大的危险性,恶意站点可能通过XSS攻击我们的服务器。
如果仅支持www.a.com这个站跨域访问,那就:
1 <?php 2 header("Access-Control-Allow-Origin: http://www.a.com");
这样就基本配置ok了~
前端的部分,如果需要跨域向服务器发cookies
还需要设置一个属性:withCredentials
1 var xhr = new XMLHttpRequest(); 2 xhr.open("POST", "http://www.b.com", true); 3 xhr.withCredentials = true; //支持跨域发送cookies 4 xhr.send();
当然,服务器端也要设置
1 <?php 2 header("Access-Control-Allow-Credentials: true");
好吧,下面说说需要注意的地方。
如果不使用第三方库,用原生javascript来写,还是有些地方需要注意的。
1、不要设置X-Requested-With头
因为跨域访问,如需带header,服务器端必须要allow,不然报错。
setRequestHeader("X-Requested-With", "XMLHttpRequest")主要用在Ajax调用资源时,服务器能判断该次请求是Ajax的。
2、INVALID_STATE_ERR: DOM Exception 11
这是一个神奇的错误,网上找了一下,也没什么较为明确的答复。但我却在手机端遇到了这个问题!
测试了一下:在IOS4和IOS5的UC浏览器、Safari、Chrome,进行CORS访问均会报这个错,
Android4.0原生浏览器,也无法正常CORS(没有测试2.3和2.2)
估计也是报这个错,但没控制台,所以无法查bug。
Android4.0下的Chrome和UC都可以顺利CORS。
本以为是浏览器兼容的问题,经过蛋疼的排查之后,发现...
我们可以看一下,下面两段代码有啥差异?
1 var xhr = new XMLHttpRequest(); 2 xhr.withCredentials = true; //支持跨域发送cookies 3 xhr.open("POST", "http://weibo.com/demo/b/index.php", true); 4 xhr.send();
1 var xhr = new XMLHttpRequest(); 2 xhr.open("POST", "http://weibo.com/demo/b/index.php", true); 3 xhr.withCredentials = true; //支持跨域发送cookies 4 xhr.send();
唯一的差异就是xhr.withCredentials = true; 的位置。
但就是这个差别,导致第一段代码无法顺利在手机端运行,并报INVALID_STATE_ERR: DOM Exception 11这个错!
而在桌面版浏览器下,两段代码都可以顺利运行!
所以,以后设置withCredentials属性时,一定要在open方法之后!
篇幅有限,想要参考更多的CORS,可以查看下面的参考网站.
参考:
http://www.w3.org/TR/cors/
http://www.html5rocks.com/en/tutorials/cors/
https://developer.mozilla.org/en-US/docs/HTTP_access_control (MDN十分详细的讲解)
http://enable-cors.org/index.html (不同的服务器怎么配置CORS)
http://people.opera.com/tiffanyb/2011/cors/ (来自Opera的CORS测试Demo)
http://arunranga.com/examples/access-control/ (另一个CORS的测试Demo)
本文链接:http://www.cnblogs.com/maplejan/archive/2012/12/02/2797864.html
转载于:https://www.cnblogs.com/maplejan/archive/2012/12/02/2797864.html
CORS(Cross-Origin Resource Sharing) 跨域资源共享相关推荐
- CORS(Cross-Origin Resource Sharing)跨域资源共享
CORS(Cross-Origin Resource Sharing)跨域资源共享 由于浏览器同源策略的影响,跨域问题在我们日常开发中经常遇到,此前有一系列的跨域问题的解决方案,如JSONP.flas ...
- Spring Boot中对CORS(Cross-Origin Resource Sharing 跨域资源共享)的支持
1.概念 Cors(Cross-Origin Resourece Sharing)是由W3C制定的一种跨域资源共享技术标准,目的是为了解决前端的跨域请求. 2.实验步骤 SpringBoot中配置Co ...
- tomcat7.0配置CORS(跨域资源共享)
平时我们做前台页面时可能会遇到浏览器以下提示(浏览器控制台): 已阻止跨源请求:同源策略禁止读取位于 http://xxx.xxx.com 的远程资源.(原因:CORS 头缺少 'Access-Con ...
- php跨域资源共享,CORS 跨域资源共享
CORS (Cross-Origin Resource Sharing) 跨域资源共享 为什么需要 CORS 首先,跨域指的是同一个域名下的资源,同时要注意域名与子域名,比如 developers.e ...
- Cross-Origin Resource Sharing[1] 跨域资源共享
Cross-Origin Resource Sharing [1] 跨域资源共享. 中文名 跨域资源共享 外文名 Cross Origin Resource Sharing CORS是一种允许当前域( ...
- 跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享
在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...
- 跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享
跨域的另一种解决方案--CORS(Cross-Origin Resource Sharing)跨域资源共享 参考文章: (1)跨域的另一种解决方案--CORS(Cross-Origin Resourc ...
- 跨域资源共享 CORS
简介 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请 ...
- AJAX跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
最新文章
- 烂泥:php5.6源码安装及php-fpm配置与nginx集成
- DIV+CSS圆角边框
- C# 程序运行耗时测试类
- MySQL入门 (五) : CRUD 与资料维护
- flume 一对多hdfs_10PB 规模的 HDFS 数据在 eBay 的迁移实战
- Mysql中把varchar类型的字段转化为tinyint类型的字段
- mysql命令导出表结构和数据_mysql-用命令导出、导入表结构或数据
- emqx_auth_mysql报错_EMQ插件组合实现物联网边缘平台的设备通信管理
- 批处理(BAT)教程
- Java代码操作数据库(上)——JDBC(JDBC、JUnit、PreparedStatement) 练习
- [转载]在安装win7系统时如何不产生100M的系统保留分区
- 蓝桥ROS机器人之v-rep_pro_edu_v3_6_2
- 电子表格软件2013 免费版
- 大学一级计算机字处理模拟题,大学计算机一级模拟操作题2
- 知乎书籍排行网站——建站始末
- 《信息物理融合系统(CPS)设计、建模与仿真——基于 Ptolemy II 平台》——1.7 时间模型...
- ARC120E - 1D Party
- 阜阳睿趣机器人编程_编程教育中心怎么样睿趣疯狂机器人_睿诚教育蒸蒸日上...
- 静态方法:关于Java8中的日期时间API,你需要掌握这些!!
- 刷脸支付提高商家交易效率带动零售业的发展
热门文章
- bootstrap-datepicker的使用
- pdns backend mysql_DNS系列02-PDNS-Authoritative简介
- 制作LCD 的测试图片RGB666格式
- Android开发-在Android里接入阿里云推流SDK实现直播推流的功能
- Python 脚本帮你找出微信上删除你好友的人
- leetcode_195_tenth_line
- LeetCode 195. Tenth Line (shell)
- 单例模式出现内存reorder,以及解决
- forcats | fct_reorder2函数功能详解及其在可视化中的应用
- Vue中组件到底是什么