跨域——CORS、JSONP

出去溜达了一圈面试,发现很多公司爱问CORS技术,辣mo~这一节我们来研究下CORS吧 ~


开场图.png

什么是跨域?

一个url地址的组成:协议,域名,端口号,如果这几个因素任意一个不相同的情况,都属于不同的域。不同的域之间的请求,就叫做“跨域”。

跨域的存在原因,是因为浏览器的“同源策略”。同源策略的存在可以保护用户隐私信息,防止身份伪造等。只有相同的域名,协议,端口号才能够正常通信。

值得注意的是,跨域并不是请求发不出去,而是服务端能接收到请求并且返回数据结果,这个数据结果被浏览器拦截了。

跨域的解决方式有哪些?

老生常谈,面试常问的问题,JSONP,CORS,postmessage,iframe,nginx代理巴拉巴拉顺扣就能说出来的答案,但是实际运用上呢?
这里先提JSONP,CORS两种,其他的后续补充 ~

1、JSONP
简单来说,jsonp是带有回调函数callback的json,但是它的局限性在于,JSONP只能实现GET请求。jsonp需要通过script标签引入(script标签是不受同源策略限制的)。

<script type='text/javascript'>
  function getSomething(data){
    //dosomething
  }
</script>
<script src='http:xxx/xx/xx.js?callback=getSomething'></script>

获取数据的地址后面跟着callback参数,这个参数名一般是跟后端协商格式得到的,返回后调用callback函数。

jsonp优缺点
优点:兼容性好,可以在更古老的浏览器中运行,请求完毕之后通过调用callback函数获取结果。
缺点:只能支持GET请求。

在CORS标准之前,jsonp请求只能仅限于GET请求,直到CORS标准出来,市场上大部分的浏览器都支持CORS。

2、CORS
支持CORS请求的浏览器一旦发现请求跨域,会对请求进行一些特殊处理,实现了CORS的服务器,接受请求,并且做出响应。

客户端不需要对跨域请求做任何特殊处理。实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨源通信。

浏览器将跨域请求分为简单请求非简单请求

简单请求满足以下条件:
(1)、请求方式是:HEAD GET POST
(2)、HTTP头信息不超过以下字段:
Accept 、 Accept-Language、Content-Language、
Content-Type:application/x-www-form-urlencoded、 multipart/form-data、text/plain

简单请求

浏览器判定该请求为简单请求的时候,会在request头部添加origin(协议+域名+端口)字段,表示我们的请求源,CORS会将该字段作为跨域标识。

CORS接收到请求后,会判断Origin是否在允许的源范围内,如果是在范围内的,则服务端会在响应头部添加Access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。如果不在范围内,响应头没有包含Access-Control-Allow-Origin,浏览器会抛出“同源检测异常”。

  • Access-Control-Allow-Origin:该字段是必须。如果值是“ * ”,表示接受任意域名的请求,不过出于服务器安全考虑,一般都不会设置为*。Access-Control-Allow-Origin也可以返回允许访问的源,如果在允许范文源的范围内,则浏览器不会拦截请求响应。

  • Access-Control-Allow-Credentials:该字段可选。表示是否允许发送cookie,这个值只能设置为true,否则不要添加该字段。并且,当Access-Control-Allow-Origin设置为*,该字段就算设置为true,出于安全考虑,是不会发送cookie。

  • Access-Control-Expose-Headers:该字段可选。该字段是一个逗号分隔开的字符串,指定浏览器CORS请求会额外发送的头部字段。

这里需要注意的是,即时服务器同意发送cookie,如果浏览器没设置,也不会发送cookie的,开发者需要设置withCredentials为true,将请求带上cookie

非简单请求

对服务器有特殊要求的请求,在正式通信之前,会增加一次HTTP查询请求,称之“预检查请求”。浏览器先询问服务器,当前网页域名是否在可允许访问的范围内,以及可以使用哪些头部信息字段,状态码为204,只有当预检通过了,浏览器才会发出正式请求,这时候才会返回200。

“预检”请求用的方法就是OPTIONS,表示这个请求是用来询问。头部的Origin用来标识请求源。一旦服务器通过“预检”请求,以后每次浏览器正常的CORS请求,都会有一个Origin头字段,服务器回应也会有一个Access-Control-Allow-Origin头部字段。

写在最后

CORS比JSONP更强大,JSONP只支持GET请求,但是兼容性强大,CORS可以支持所有http请求。

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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.同源策略(Same origin Policy) 浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的...
    好奇男孩阅读 329评论 0 2
  • 前沿: 最近总听到同事聊跨域得问题,于是自己抽空仔细的查阅了一下关于跨域的知识。说到跨域,就得提到同源,跨域是指一...
    戈弋图阅读 1,805评论 0 4
  • CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 ...
    littleyu阅读 211评论 0 2
  • CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 ...
    奇特思维家阅读 1,119评论 0 3
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,290评论 0 6