跨域的另一种解决方案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的顶级域名。

view sourceprint?

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实现这个验证。

view sourceprint?

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待补充。。。

时间: 2024-12-21 12:45:59

跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享的相关文章

跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

(转)跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

前端跨域问题的几种解决方案

前端跨域问题 一:同源策略 1.what's this 所谓同源是指,域名,协议,端口相同.当浏览器运行一个JS脚本时会进行同源检测,如果不同源是不能执行的. 2.源继承 来自about:blank,javascript:和data:URLs中的内容,继承了将其载入的文档所指定的源,因为它们的URL本身未指定任何关于自身源的信息. 3.变更源 变更源可以实现基础域相同的不同页面的跨域问题. 如:a.baidu.com/index.html 通过 iframe 引入 b.baidu.com/ind

解决ajax跨域问题【5种解决方案】

什么是跨域问题?跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源.跨域问题是针对JS和ajax的,html本身没有跨域问题. 查看浏览器开发者工具Console报错: Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allo

关于跨域问题的几种解决方案

1.什么是跨域? 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 例如:a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访问,其实是浏览器的限制.理解这一点很重要!!! 同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域: 跨域原因产生:在当前域名请求网站中,默认不允许通过aja

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

目前中文方面的资料还比较少,能搜索到的那仅有的几篇相关介绍,也几乎是雷同的,其中C#方面的更是少之又少. XMLHttpRequest接口是Ajax的根本,而Ajax考虑到安全性的问题,是禁止跨域访问资源的. 也就是说:www.baidu.com的页面无法通过Ajax来调用www.cnblogs.com的资源. 但jQuery的$.ajax()明明就可以跨域访问啊!对,的确是跨了,但那是jsonp(JSON with Padding)!利用 <script> 元素的这个开放策略,网页可以得到从

跨域解决的几种方案

前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox

什么是跨域 &amp; 跨域的3种解决方案

所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)端口号(port) 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石 同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互.例如办公内外网环境,当我们访问外网一个恶意网站的时候,恶意网站就会利用我们的主机向内网的 url 发送 ajax 请求,破坏或盗取数据 一.浏览器的非同源限制以及3种解决思路 非同源限制 无

跨域解决方案CORS使用方法

CORS(Cross-Origin Resource Sharing), 目前CORS还处于w3c的草案,它定义了跨域访问时服务器和客户端之间如何通信.他的原理是通过定义HTTP头部的信息,来让客户端和服务器互相确认,从而决定是否相应本次请求. 兼容性: IE10+  chrome21+  firefox21+  safari5.1+  opera12.1+ (IE8, 9中使用XDomainRequest) 详见 http://caniuse.com/cors , 可通过(new XMLHtt