跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享
在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染。主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求。(同源策略, 即JavaScript或Cookie只能访问同域下的内容)。跨域的解决方案有多重JSONP、Flash、Iframe等,当然还有CORS(跨域资源共享,Cross-Origin Resource Sharing)今天就来了解下CORS的原理,以及如何使用。
一、CORS概述
跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明那些来源可以通过浏览器访问该服务器上的各类资源(包括CSS、图片、JavaScript 脚本以及其它类资源)。另外,对那些会对服务器数据造成破坏性影响的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据)。
二、CORS原理
例如:域名A(http://a.example)的某 Web 应用程序中通过<img>标签引入了域名B(http://b.foo)站点的某图片资源(http://b.foo/image.jpg)。这就是一个跨域请求,请求http报头包含Origin: http://a.example,如果返回的http报头包含响应头 Access-Control-Allow-Origin: http://a.example (或者Access-Control-Allow-Origin: http://a.example),表示域名B接受域名B下的请求,那么这个图片就运行被加载。否则表示拒绝接受请求。
三、CORS跨域请求控制方法
1.http请求头
Origin: 普通的HTTP请求也会带有,在CORS中专门作为Origin信息供后端比对,表明来源域。
Access-Control-Request-Method: 接下来请求的方法,例如PUT, DELETE等等
Access-Control-Request-Headers: 自定义的头部,所有用setRequestHeader方法设置的头部都将会以逗号隔开的形式包含在这个头中
2.http响应头
然后浏览器再根据服务器的返回值判断是否发送非简单请求。简单请求前面讲过是直接发送,只是多加一个origin字段表明跨域请求的来源。然后服务器处理完请求之后,会再返回结果中加上如下控制字段
Access-Control-Allow-Origin: 允许跨域访问的域,可以是一个域的列表,也可以是通配符"*"。这里要注意Origin规则只对域名有效,并不会对子目录有效。即http://foo.example/subdir/ 是无效的。但是不同子域名需要分开设置,这里的规则可以参照同源策略
Access-Control-Allow-Credentials: 是否允许请求带有验证信息,XMLHttpRequest请求的withCredentials标志设置为true时,认证通过,浏览器才将数据给脚本程序。
Access-Control-Expose-Headers: 允许脚本访问的返回头,请求成功后,脚本可以在XMLHttpRequest中访问这些头的信息
Access-Control-Max-Age: 缓存此次请求的秒数。在这个时间范围内,所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据,非常有用,大幅优化请求次数
Access-Control-Allow-Methods: 允许使用的请求方法,以逗号隔开
Access-Control-Allow-Headers: 允许自定义的头部,以逗号隔开,大小写不敏感
四、浏览器支持情况
在大部分现代浏览器中有所支持,支持(部分支持)CORS协议的浏览器有IE8+, Firefox5+, Chrome12+, Safari4+,移动端几乎全支持。
注:Internet Explorer 8 、9使用 XDomainRequest 对象实现CORS。
五、CORS使用案例
案例环境:客户端使用jQuery,服务端WebApi(2.2)。因本人使用.net语言,所以服务端就使用webApi来演示了。
首先新建一个webApi项目,这里就不截图一步步介绍了,然后使用Nuget安装支持cors的扩展组件,
Install-Package Microsoft.AspNet.WebApi.Cors
然后打开App_Start问价夹下的WebConfig.cs配置文件类,在Register方法中配置一个全局的cors,为了方便我将一些参数配置到web.config配置文件中
如果不想使用全局的CORS,可以在某个方法或者ApiController上这样配置:[EnableCors(origins: "*", headers: "*", methods: "*")],可以使用具体的参数,多个参数以逗号分隔,不用说,肯定英文逗号。origins 域名要带上http的顶级域名。需要添加 using System.Web.Http.Cors;
一般请求来说,客户端的AJAX请求不需要做任何改变,只需要服务端稍作改变即可。
客户端js代码: apiRootPath是我预先设置的api的顶级域名。
01.
$.ajax({
02.
url: apiRootPath +
"api/Account/Register"
,
03.
type:
"post"
,
04.
data: {
05.
"UserName"
: mobile,
06.
"Pass<a href="
http:
//www.it165.net/edu/ebg/" target="_blank" class="keylink">word</a>": pwd
07.
},
08.
dataType:
"json"
,
09.
success: function (data) {
10.
if
(data.State ==
true
) {
11.
RegSuccess(mobile, pwd);
12.
}
else
{
13.
$(
"#errorText"
).html(data.Message);
14.
$(
"#registerBtn"
).text(
"注册"
);
15.
}
16.
}
17.
});
因为我配置了全局的CORS方法,而且服务端没有特别之处了,和普通的网站(不跨越)写法一致,这里就不予贴出了。
如果需要对请求进行身份验证,怎么办?我们一cookies实现这个验证。
01.
$.ajax({
02.
url: apiRootPath +
"api/Account/Login"
,
03.
type:
"post"
,
04.
data: {
05.
"UserName"
: userName,
06.
"Pass<a href="
http:
//www.it165.net/edu/ebg/" target="_blank" class="keylink">word</a>": password
07.
},
08.
crossDomain:
true
,
09.
xhrFields: {
10.
withCredentials:
true
11.
},
12.
dataType:
"json"
,
13.
success: function (data) {
14.
if
(data.State ==
true
) {
15.
MLogin(userName, password);
16.
}
else
{
17.
$(
"#loginBtn"
).text(
"登录"
);
18.
$(
"#errorText"
).html(data.Message);
19.
}
20.
}
21.
});
注意这个两句话:crossDomain: true,xhrFields: {withCredentials: true}
六:安全隐患
如果程序猿偷懒将Access-Control-Allow-Origin设置为:Access-Control-Allow-Origin: * 允许任何来自任意域的跨域请求,那么久存在被 DDoS攻击的可能。
and待补充。。。
跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享的更多相关文章
- 跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))
4. [HTML5] postMessage 问题: 对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊.此文仅使用html5的新特性pos ...
- 跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享
在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...
- (转)跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享
在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...
- 跨域访问技术CORS(Cross-Origin Resource Sharing)简介
为什么要用CORS? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttp ...
- Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)
https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...
- 【转】解决ajax跨域问题的5种解决方案
转自: https://blog.csdn.net/itcats_cn/article/details/82318092 什么是跨域问题?跨域问题来源于JavaScript的"同源策略& ...
- 解决ajax跨域问题【5种解决方案】
什么是跨域问题?跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的 ...
- Cross-Origin Resource Sharing(CORS)详解,CORS详解,CORS原理分析
Keywords CORS, 跨域,JS跨域调用,Ajax CORS 跨域,跨域详解,CORS跨域原理 Cross-Origin Resource Sharing详解 Cross-Origin Res ...
- Portswigger web security academy:Cross-origin resource sharing (CORS)
Portswigger web security academy:Cross-origin resource sharing (CORS) 目录 Portswigger web security ac ...
随机推荐
- sizeof计算空间大小的总结
sizeof,看起来还真不简单,总结起来还是一大堆的东西,不过这是笔试面试中出现比较频繁的,我也是考过才觉得很重要,有些规则如果不注意,还真是拿到一道题目摸不着头脑,所有总结一下,方面忘记的时候瞄一瞄 ...
- 阿里开源的热补丁框架AndFix使用教程
阿里巴巴推出的AndFix框架 首次给出大家这个框架的地址:https://github.com/alibaba/AndFix 对源码比较感兴趣的同学们可以自行研究代码 AndFix原理介绍 AndF ...
- 【dedecms】DEDE列表页调用文章内容第一张图片(非缩略图)方法
打开 ../ include/ common.func.php 添加代码 //将缩放图转变为文章第一张图片 function firstimg($str_pic) { $str_sub=substr( ...
- Halcon的应用程序 打开后 弹出没有帮助文件错误提示
问题: Halcon的应用程序 打开后 弹出没有帮助文件错误提示 解决方法: 建立(C:\ProgramFiles\MVTec\halcon)目录,将halcon安装目录下的help文件夹复制过来即可 ...
- PortableApps使用入门
PortableApps使用入门 Software 介绍 添加软件 绿软下载站推荐 介绍 官网:http://portableapps.com/ PortableApps作为一款卓越的绿软管理软件,它 ...
- Vue安装依赖npm install时报错问题解决方法
1.vue的安装依赖于node.js,要确保你的计算机上已安装过node.js. 可进入cmd编辑器,输入命令 node -v进行查看.出现版本信息即成功!没有则从浏览器上面下载安装即可,没有安 ...
- mysql中的union用法以及子查询综合应用
union查询就是把2条或者多条sql语句的查询结果,合并成一个结果集. 如:sql1: N行,sql2: M行,sql1 union sql2 ---> N+M行 1.能否从2张表查询再uni ...
- 洛谷P3434 [POI2006]KRA-The Disks(线段树)
洛谷题目传送门 \(O(n)\)的正解算法对我这个小蒟蒻真的还有点思维难度.洛谷题解里都讲得很好. 考试的时候一看到300000就直接去想各种带log的做法了,反正不怕T...... 我永远只会有最直 ...
- 【NOIP2015】子串(动态规划)
题目戳我 题解 很简单的一道题... 看来那时候还是我太菜了... 设f[i][j][k][0/1]表示在第一个串中的位置i,匹配到了位置j,一共分了k段,0/1表示上一个位置是否在某一段中 转移就很 ...
- Bzoj1176:Mokia&Cogs1752:[BOI2007]摩基亚Mokia
题目 Cogs 没有Bzoj的权限号 Sol 离线,\(CDQ\)分治,把询问拆成\(4\)个,变成每次求二位前缀和 那么只要一个修改操作(关键字为时间,\(x\),\(y\))都在这个询问前,就可以 ...