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

解如何利用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:   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
一、HTTP Begin1、什么是 HTTPHTTP 是基于文本传输的协议,它位于 OSI 七层模型的应用层(Application) ,HTTP 是通过客户端向服务器发送请求,服务器响应请求来进行通讯,截止到目前...【详细内容】
2020-11-12   CORS跨域  点击:(2)  评论:(0)  加入收藏
平时大家在用PS的时候,速度一直提不上去了该怎么办?那么下面这120个由大神们总结的PS技巧,你务必要学会,能让你的设计更高效!(即使学不会也收藏起来,早晚会用到)这120款技巧覆盖了PS...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
基金投资作为低风险偏好者的最爱一样面临投资大逻辑,否则基民也会在不断起起伏伏的行情中迷茫和困惑。虽然我写过很多关于投资理念的文章,不过在信息泛滥的时代,越宽泛和理念的...【详细内容】
2020-11-12   CORS跨域  点击:(2)  评论:(0)  加入收藏
概述Go语言作为一门开源的编程语言,以简洁、快速、安全著称。尤其在高性能的分布式服务器领域得到广泛应用。技多不压身,在学习过程中记录下来,以备后续参考,希望对有同样需求的...【详细内容】
2020-11-12   CORS跨域  点击:(2)  评论:(0)  加入收藏
我们都知道现在mysql开源数据库是我们现在小型网站使用较多的免费数据库,我们在创建数据表时容易出现表名出现有问题需要修改,今天在这里教大家利用Sql语句来修改表名的方法:本...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
作为一个后端开发人员来说,微信开发已经是必备的技能之一了,今天小编就来分享一个相关的类库shenghui0779/gochat(以下简称wechat)。这个类库简单易用,看源码的时候目录结构一...【详细内容】
2020-11-12   CORS跨域  点击:(4)  评论:(0)  加入收藏
MGR简介MySQL Group Replication,简称MGR,它是MySQL官方推出的基于paxos分布式一致性协议的状态机复制,实现了分布式下数据的最终一致性。同时MGR提供了高可用、高扩展、高可靠...【详细内容】
2020-11-12   CORS跨域  点击:(4)  评论:(0)  加入收藏
服务器意外断电后,RAID控制器宕机如下图所示,使用BMC管理口进iKVM,在服务器启动的过程中可以看到如下提示 解决办法:1、开机过程中按提示按ctrl+R,进RAID管理界面 2、将Boot Mo...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
小红书种草推广已经是重要的网络推广方式之一,做小红书推广有最重要的两点。...【详细内容】
2020-11-12   CORS跨域  点击:(5)  评论:(0)  加入收藏
IPSec VPN高可用性解决方案需要用到DPD、RRI、路由、SLA等技术组合使用才能做到简单的高可用性,缺点是使用场景单一且配置繁琐。由于IPSec VPN的局限性,思科基于IPSec VPN和动...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
民间借贷作为民事案件中最为常见的纠纷之一,其出现的频率相当高、案件类型颇为繁多。为此,笔者特整理了以下最为常见的十种民间借贷案件类型,并分别收集了相关案例以供大家阅...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
移动硬盘怎么选?防水、防震、抗冲击,高速读写最重要,这样才能保证数据的安全和快速读写。 闪迪至尊极速移动固态硬盘,1T版,目前价格1199,虽然价格要比普通移动硬盘贵一些,但是品质...【详细内容】
2020-11-12   CORS跨域  点击:(2)  评论:(0)  加入收藏
由iPhone带头,越来越多的手机把3.5mm耳机孔去掉了之后。用户们就被半逼迫着购买了无线耳机,或者typec/lighting借口耳机。但是对于用户已经拥有的那些3.5mm耳机怎么办呢?如果你...【详细内容】
2020-11-12   CORS跨域  点击:(2)  评论:(0)  加入收藏
近日,我在网上想要买一块硬盘,因为我的电脑硬盘内存太小了,当我打开某宝的时候,我搜索电脑硬盘的时候,我发现电脑硬盘有几种颜色,分别是:黑盘、蓝盘,绿盘、那不同颜色的硬盘要怎么选...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
选固态硬盘核心看5点:接口、闪存颗粒(类型和大小)、主控、缓存、价格。 1.电脑接口决定支持的固态硬盘类型,接口不匹配性能再好也白搭; 2.闪存颗粒决定固态硬盘的容量、性能和质...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
今天遇到一件奇怪的事情!因为单位升级到WIN10,所以最近一直在重装系统,工作量很大,先是备份资料,重装系统,还原资料,配置计算机名,配置IP,配置邮箱,安装打印机驱动,一大堆的事情,还好这W...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
不管是固态硬盘还是机械硬盘,分区都是一样的操作。1、首先按照系统版本(32位或64位,可在此电脑,右键,属性中查看)下载一个分区助手diskgenius,下载完成安装上并打开diskgenius。 2...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
随着电商平台的兴起,很多小伙伴在购买电脑时,都会选择网上选购配件,买好后开始自己组装,却发现开不了机、没声音、USB不能用等问题,其实这是因为你电脑跳线没接对或者没有接。跳...【详细内容】
2020-11-12   CORS跨域  点击:(3)  评论:(0)  加入收藏
今天给大家说说电脑文件夹的那些事。我们电脑一般需要根据硬盘的数量分成几个盘,点击这里可以了解硬盘分区,而系统一般是放在 C 盘的,所以今天也主要说说 C 盘的文件夹中哪些东...【详细内容】
2020-11-12   CORS跨域  点击:(2)  评论:(0)  加入收藏
智能手机系统,就存在着这样一个问题:随着使用越久,残存的垃圾就越多,磁盘的存储空间都会由于删除等操作出现一些碎片。还有一点是安卓手机是电子产品,使用得越久,器件会存在老化的...【详细内容】
2020-11-12   CORS跨域  点击:(2)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条