跨域请求CORS

浏览器默认是不允许XMLHttpRequest(ajax)发送请求到其他网站(跨域)的,
比如a网站的javascript想要从b网站获取数据时就会被浏览器拦截。这也是为了安全考虑,如果不做限制的话,
a网站的js 请求b网站时默认会把b网站的cookie带上,a网站就可以以b网站的登录信息(b网站的cookie)去攻击b网站。

但是实际应用中,有时候确实需要跨域请求的,跨源资源共享 (CORS)就是用来解决实现这种功能的。
CORS是http协议的一部分,需要浏览器和web服务器共同支持,目前绝大多数的浏览器和服务器都已支持。

CORS把请求分成两类,简单请求和非简单请求

简单请求:

同时满足下面两个条件就是简单请求

(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

简单请求过程如上图,步骤为:
1.浏览器发现ajax的请求时跨域的,会在请求头里面添加一个origin字段,值为当前域地址(不包含路径)。

2.服务器拿到请求后会正常处理请求,然后再检查请求的头,发现origin,就知道这是跨域的请求,会检查origin的域名是否在服务器的许可列表里,如国在就在响应头添加一个Access-Control-Allow-Origin字段,值就是origin的值。如果不在就不设置Access-Control-Allow-Origin这个头。然后返回相应

3.浏览器收到响应,知道这是个跨域的响应,检查响应头里是否有Access-Control-Allow-Origin,如果没有就立即报错并停止执行ajax的代码,如果有,并且值为自己的域名,或者为通配符*,就正常处理。

注意在这种简单请求里,浏览器会正常发送请求的,服务器也会正常处理请求,唯一可能被拦截的就是最后浏览器收到响应后是否会处理,如果没有Access-Control-Allow-Origin这个头信息,就会停止处理。所以这个过程请求响应一定还是会被处理的。

非简单请求

如果请求不符合简单请求的条件,就是非简单请求。这种请求一般会修改服务器上的资源,所以处理上比较严格。



非简单请求过程如上图,步骤为:

  1. 浏览器发现ajax的请求是跨域的,并且是非简单请求,为了服务器的安全,不会像简单请求一样直接发送请求,而是会先发送一个OPTIONS的请求给服务器,询问服务器网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错,这个请求里也会有origin头信息。

2.服务器收到"预检"请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应

3.浏览器收到服务器的“预检请求”响应后,检查头信息里的Access-Control-Allow-Origin字段,如果为当前的域名或者为通配符*, 则知道这个跨域请求可以进行,就会正常发送用户的请求,否则为不可进行,拦截用户的请求

从上面的过程可以看到,无论是简单还是非简单请求,CORS的过程都需要服务端和浏览器共同配合,
请求只要通过了浏览器的验证,服务器总是会正常处理。所以如果我们使用代码怕虫来发送请求,就不会有跨域请求的问题,总能成功。

另外注意到,简单请求服务器总是会处理,拦截只发生在浏览器处理服务器响应过程中,在chrome的network里还是可以看到服务器返回的正常数据,并且响应码200正常。这就警示我们,不要在简单类型的请求里更新重要数据,否则跨站cookie攻击漏洞就会发生。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容

  • 前沿: 最近总听到同事聊跨域得问题,于是自己抽空仔细的查阅了一下关于跨域的知识。说到跨域,就得提到同源,跨域是指一...
    戈弋图阅读 1,805评论 0 4
  • 前端开发的童鞋,应该都有听过跨域请求,但这其中的细节可能还不清楚,比如: 什么是跨域请求? 为什么会存在跨域请求?...
    smallmuou阅读 2,276评论 0 2
  • cors 内容回顾:restful 规范10个 除了 jsonp(它只可以发 get 请求), 还有cors(可以...
    Ugfly阅读 4,014评论 0 0
  • OPTIONS 方法比较少见,该方法用于请求服务器告知其支持哪些其他的功能和方法。通过 OPTIONS 方法,可以...
    elef阅读 2,402评论 0 0
  • 第一步:创建允许跨域的中间件 第二步:加入以下加上请求头代码 第三步:在Kernel中注册 补充: 1.在第三步中...
    走在路上的低级弟弟阅读 4,681评论 0 2