辛星浅析跨域传输的CORS解决方案

首先我们有一个概念,那就是“同源准则",也就是same-origin  policy,它要求一个网站(协议+主机+端口号)来确定的脚本、XMLHttpRequest和Websocket无权去访问另一个网站的内容。

如果设置不正确,它通常会报错如下:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource。

所谓CORS,也就是Cross-Origin  Resource  Sharing,它的基本原理是通过设置HTTP请求和返回中的header,告诉浏览器该请求是合法的。这就涉及到服务器和浏览器双方的设置:请求的发起(Http  Request  Header)和服务器对请求正确的响应(Http  Response  Header).

我们可以使用原生的javascript来通过XMLHttpRequest或者XDomainRequest来发起请求,我们也可以通过jQuery的$.ajax()来发起XHR或者CORS请求,不过该方法不支持IE下的XDomainRequest,我们需要另外的插件来解决这个问题。

其中通过jQuery调用的范例乳腺癌:

$.ajax({

type:‘GET‘,

url:‘http://www.aaa.com‘,

contentType:‘text/plain‘,

success:function(){},

error:function(){}

}});

根据请求的内容不同,浏览器会需要添加对应的Header或者发起额外的请求。其中的细节都由浏览器来处理,对于用户来将是透明的。

一般我们将CORS分为两类:(1)简单请求   (2)不是那么简单的请求

所谓简单请求,就是请求类型必须是GET、POST、HEAD三者中的一个,请求头Header中只能包含:Accept、Accept Language、Content  Language、Last Event ID、Content Type,而且Content Type只接受application/x-www-form-urlencoded、multipart/form-data、text/plain这三种。

除了上面的条件,比如PUT、DELETE或者Content Type是application/json,均为"不是那么简单的请求".这种请求浏览器会在真实请求之前,额外发起一次类型为OPTIONS的请求(preflight  request),只有服务器正确的响应了OPTIONS请求之后,浏览器才会发起该请求。

对于简单请求,下面是b.com向a.com发起的一次GET请求的范例:

GET /xin   HTTP/1.1
Origin: http://b.com
Host: a.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

在响应之前,其中我们的头部应该这么设置,下面是一个范例:

Access-Control-Allow-Origin: http://b.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

其中Access-Control-Allow-Origin是Server同意跨域访问的域名列表,如果我们允许任意网站请求资源,此处可以填写"*",而Access-Control-Expose-Headers可以设置返回额Header以传递数据,简单请求中允许使用的Header包括:Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma。

对于不是那么简单的去年跪求,下面是一个范例:

OPTIONS /cors HTTP/1.1
Origin: http://b.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: a.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

其中Access-Control-Request-Method代表真实请求的类型,而Access-Control-Request-Headers则代表真实请求的请求头的key内容。服务器在验证了这两项内容的合法性之后才会同意浏览器发起真实的请求。

下面是对应的响应的头部设置:

Access-Control-Allow-Origin: http://b.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8

还有一个就是Access-Control-Max-Age,它是浏览器保存的一个缓存的时间,单位是秒,在缓存过期之前,浏览器无须再次验证同一类型的请求是否合法。



时间: 2024-11-05 13:42:21

辛星浅析跨域传输的CORS解决方案的相关文章

跨域访问之CORS

CORS:定义 2014年1月16日,W3C的Web应用工作组(Web Applications Working Group)和Web应用安全工作组(Web AppSec)联合发布了跨源资源共享(Cross-Origin Resource Sharing)的W3C正式推荐标准(W3C Recommendation).该标准定义了在必须访问跨域资源时,浏览器与服务端应该如何沟通,它提供一种机制,允许客户端(如浏览器)对非源站点的资源发出访问请求.所有提供跨源资源请求的API都可以使用本规范中定义的

辛星浅析You don't have permission to access / on this server.的解决办法

通常我们会遇到"You don't have permission to access / on this server."的提示,从字面意思是说,我们没有访问本服务器的权限,那么它常见的问题又是什么呢? 第一个假如是虚拟主机,那么可能是虚拟主机配置的错误,我们在<VirtualHost>对里面配置的时候,在其子配置项中,我们在<Directory>中修改为如下即可: Order  allow,deny Allow  from all 第二个原因就是我们没有响应

AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比

1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介绍JSONP这种仅能支持GET请求的跨域方式和CORS作对比:最后,阐述CORS的XHR解决方式和IE中的XDR解决方式,在此基础上提供了工具函数进行跨浏览器的HTTP请求对象创建. 2 跨域问题的源头-同源策略 在客户端编程语言中,如javascript和 ActionScript,同源策略是一个

Ajax--同源策略,jsonp跨域传输

什么是同源策略? 阮一峰的博客 同源策略 同源策略的解决方法: 跨域传输 img 标签的src是可以引入其他域名下的图片 script标签的src属性同理 ,也可以引入其他域名下的js文件,并执行 1.script的属性引入文件(页面地址)的时候是允许跨域 2.在页面地址后,拼接?callback=参数,让后端能接受到我们的参数 3.需要后端的配合,接收传过来的参数(函数名称),把我们处理好的json数据,作为函数的参数,再传回到前端 4.把我处理好的json数据,作为函数的参数在传回到前端 核

js ajax跨域被阻止 CORS 头缺少 &#39;Access-Control-Allow-Origin&#39;(转)

今天ajax请求域名的时候出现 已阻止跨源请求:同源策略禁止读取位于 http://www.zuimeimami.com*****的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决办法1: var url='http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?'; $.ajax({ url:url, dataType:'

c# WebApi之解决跨域问题:Cors

什么是跨域问题 出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容.由于这个原因,我们不同站点之间的数据访问会被拒绝. Cors解决跨域问题 跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行.它解决跨域问题的原理是通过向http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求. 解决跨域问题实例 下面就写一个简单是实例来说明如何使用CORS解决跨域 1.建立

ajax 跨域----好用的解决方案

一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍),内容大概如下: 什么是ajax跨域 原理 表现(整理了一些遇到的问题以及解决方案) 如何解决ajax跨

同源、同源策略、跨域问题、django解决方案

什么是同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 注意:假如你的网站ip是123.123.123.123,网站的域名是www.abc.com. http://123.123.123.123:80与http://www.abc.com:80仍然不是同源,因为浏览器会根据字符串来判断的! 什么是同源策略 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以a.com下的js脚本采用ajax读取b.co

跨域问题成因和解决方案

什么是同源策略?同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源. 广义跨域: 1. 资源跳转: A链接.重定向.表单提交 2. 资源嵌入: link script img frame等dom标签,还有样式中background:url().