文档章节

CORS(Cross-Origin Resource Sharing) 跨域资源共享

我是小强
 我是小强
发布于 2013/06/12 13:09
字数 1014
阅读 2367
收藏 6

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.2cto.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)

© 著作权归作者所有

我是小强
粉丝 15
博文 65
码字总数 17573
作品 0
徐汇
高级程序员
私信 提问
浏览器同源策略阻止ajax请求

Cross-Origin Resource Sharing,跨域资源共享,简称 CORS,可以作为一种跨域请求以及响应的解决方案。 1.恳求的url是PHP的,须要PHP中echo:header(""Access-Control-Allow-Origin:*"");......

w-rain
2015/04/27
34
0
JAVA服务端配置允许跨域请求

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 1.加入CROS依赖的...

冷冷gg
2016/11/13
206
0
PHP 跨域资源共享中间件 - PHP CORS

CORS 这是一个 PHP 跨域资源共享 (CORS Cross-origin resource sharing) 中间件。 支持 Array, 原生 PHP 代码 使用 PSR-7 Laravel Symfony 使用 composer require medz/cors 示例 use MedzCo......

medz
2018/03/16
1K
0
Spring MVC通过CROS协议解决跨域问题

现在接手学校网络中心的一个项目,根据团队成员的实际情况以及开发需要,老师希望做到前后端完全分离。后台使用java提供restful API 作为核心,前台无论PC或者移动端可以共用一个核心。前期解...

vstaryw
2016/07/18
149
0
$.ajax 跨域请求 Web Api

WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了。但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中,直接触发了error...

吞吞吐吐的
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
8
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
5
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部