您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

时间:2020-01-16 11:02:36  来源:  作者:

这篇文章我们聊一聊CORS跨域,它的全称是"跨域资源共享"(Cross-origin resource sharing)。

在之前的文章中我们已经详细介绍了如何使用JSONP进行接口跨域请求,如果不了解的可以参考作者之前的文章《详解前端jquery中的JSONP如何实现跨域请求》,相信一定难不倒聪明的你。

那么CORS跨域方案和jsonp跨域有何不同呢?读完这篇文章你肯定能找到答案!

跨域案例

页面地址:http://client.cors.com:8000/greeter.html,代码如下:

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图1

服务器接口地址:http://server.cors.com:3000/data,服务器代码如下:

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图2

很明显,当页面在请求服务器接口时会发生跨域现象,如下:

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图3

我们去浏览器Network中看一下请求信息,

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图4

如图4所示,响应为200,response Headers信息也很正常,这说明在跨域的情况下请求依然可以到达服务器,并且服务器能够正常响应,但是由于浏览器的同源策略并没有把返回的数据给到页面。

那么如何让页面在跨域的情况下获取到数据呢?我们回看图3,似乎在说少了一个Access-Control-Allow-Origin头,那么我们在服务器代码中加一下。

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图5

现在刷新页面,服务器返回的数据就能正常打印出来了。

'Access-Control-Allow-Origin': '*'表示接受任意域名的请求

携带凭证

在跨域的情况,服务器有时依然需要鉴权。通常服务器鉴权都是从cookie中获取信息来判断客户端的身份,那么跨域的情况下请求还能传递cookie吗?当然能,但是cookie会遵守同源策略!

1)服务器设置cookie

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图6


详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图7

如果需要服务器设置cookie,必须设置Access-Control-Allow-Credentials: true,否则会出现如下错误。

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图8

页面中的xhr对象也必须设置属性withCredentials=true。

此时刷新页面,在页面控制台中通过document.cookie查看server=123,你会发现server端设置的cookie并不存在。上面已经说了cookie会遵循同源策略,服务器的域名是server.cors.com,所以服务器设置的cookie应该是在这个域名下,并不会在页面的域名(client.cors.com)下,那如何验证服务器设置cookie成功呢?

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图9

  • 先打开接口页面,这个页面是同源的;
  • 回到请求页面,刷新;
  • 再回到接口页面,在控制台通过document.cookie就可以拿到服务器设置的cookie。

2)页面设置cookie

如果主域名相同,比如现在的例子,主域名都是cors.com,那么就可以把cookie设置在这个主域名下。

document.cookie="client=1;domain=cors.com;"

这样服务器就能获取到页面设置的cookie。

如果连主域名都不一样,那就不要妄想在页面上设置cookie让服务器获取到。这种情况下,服务器该如何鉴权呢?

第一种方式是让后端把跨域的接口代理成同域的,这样我们的后端可以拿到cookie,在他那把cookie转发给跨域服务。

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图10

第二种方式是页面发送请求时在header中附加一个token,用于鉴权,

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图11

当刷新页面时,页面控制台又报错了。

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图12

提示设置Access-Control-Allow-Headers,那我们就设置一下。

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图13

再刷新页面,请求正常了,服务端也能拿到token的值了。

简单请求与非简单请求

图13中我们拿到了token的值,此时我们再去瞧瞧浏览器中的Network,会发现页面发送了两个请求,第一个请求的method是OPTIONS,这是怎么回事呢?

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图14

原来cors跨域也分简单请求和非简单请求。

简单请求条件如下:

  • 请求方法是必须是HEAD/GET/POST三种方法之一;
  • HTTP的头信息不超出这几种字段:Accept/Accept-Language/Content-Language/Content-Language/Last-Event-ID/Content-Type,Content-Type只限于三个值Application/x-www-form-urlencoded、multipart/form-data、text/plain。

图11中我们设置了token请求头,显然不满足以上条件,所以是非简单请求。非简单请求的CORS请求会在正式通信之前增加一次HTTP查询请求,称为预检请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。预检请求用的请求方法是OPTIONS,表示这个请求是用来询问的。

我们现在尝试发送一次PUT请求,看看会有什么现象?

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图15

不出所料,浏览器再次报错!

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图16

提示我们设置Access-Control-Allow-Methods,那就只能设置了!

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图17

再次刷新页面,现在请求正常了!我们回头看一下预检请求,

详解如何利用CORS跨域,是时候让前端来指挥一次后端同学开发了

图18

不得不说,浏览器在访问跨域接口时真的是非常的小心,当然这一切都是为了安全考虑。即使这样,现在网络中也不乏XSS、CSRF等攻击。

总结

17年夏天作者去头条面试,当时笔试有这么一道题“如果浏览器请求跨域,那么这个请求还能到达服务器吗?如果能,服务器会返回什么?”。如果你读完本文,并且能充分理解,我相信这道题肯定不在话下。跨域在业务中经常遇到,大部分后端同学并不知道什么叫跨域,更不清楚该如何解决。作为前端的你,这时候就可以大显身手了!



Tags:   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言什么是数据脱敏数据脱敏是指对某些敏感信息通过脱敏规则进行数据的变形,实现敏感隐私数据的可靠保护常用脱敏规则替换、重排、加密、截断、掩码良好的数据脱敏实施1、尽...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(3)  评论:(0)  加入收藏
河南最有名的“13碗面”,吃过10种以上的一定是地道河南人,你吃过几碗?河南位于黄河中下游,优越的地理位置和条件,让河南的种植业在全国脱颖而出,被称为全国的“粮仓”。小麦是河南...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(3)  评论:(0)  加入收藏
在狗界中,有些狗狗比较凶残、霸道,今天我们就来说说被称为“犬中四煞”的4种狗,请认住它们的长相,看见了要绕路走! NO1:黑狼犬产地:中国寿命:11-12年黑狼犬是狼狗的一种,长大高大威猛...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(3)  评论:(0)  加入收藏
协议下的体面离婚 2015年1月 方晴供职于一家外企,袁亮硕士毕业后开了家公司。两人相识、恋爱后走进婚姻殿堂。 方晴和袁亮的儿子小浩出生了。本该是其乐融融的三口之家,却在一...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(2)  评论:(0)  加入收藏
中国人神话世界五千年到一万年之前到底是一个什么样的世界?相信这个问题应该是困扰了大家许久吧!其实这些问题可以从远古时代的三皇五帝开始说起,三皇五帝对于中国人的影响就如...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(2)  评论:(0)  加入收藏
去年有个新闻,说的是一名印度女孩自小被欧洲有钱人家收养,长大后要回来给自己出生的村子捐钱做慈善。等她回村的时候,村里人专门为女孩修了一条路。表面上看,这貌似是个暖心的故...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(3)  评论:(0)  加入收藏
日本在今年又给大家带来了一个巨大消息,日本著名的球星本田圭佑出资设立的一家公司,正式发售了飞行摩托车。 在之前可是在电视或者是电影中才能看到的,是具备了未来科幻的一个...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(4)  评论:(0)  加入收藏
V社今日公布了2021年Steam最畅销游戏榜单,其中涵盖了本年度Steam上收入最高的100款游戏。为了得出每款游戏的总收入,Steam计算了2021年1月1日至2021年12月15日的游戏销售额、...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(3)  评论:(0)  加入收藏
“都怪我一时糊涂铸下大错,这几年为了蒙混过关,拆东墙补西墙就怕被发现,我对不起信任我的领导同事,更对不起我的家人。”内蒙古某国有合资公司原出纳员包某在庭审现场听取公诉人...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(2)  评论:(0)  加入收藏
2021年黄金价格下跌11.3%,黄金现在已经下跌了6.5%。白银价格一度下跌19.3%,白银现在已经下跌了15%。美元通胀。白银自2020年2月份以来,五家中央银行(Fed、欧洲中央银行、日本中...【详细内容】
2021-12-28  Tags: CORS跨域  点击:(3)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条