新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  SEO  推广  媒体  移动
财经百科  股票  知识  理财  财务  金融
教育考试  育儿  小学  高考  考研  留学
您当前的位置:首页 > IT百科 > 程序开发 > 编程百科

解如何利用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:   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
这篇文章我们聊一聊CORS跨域,它的全称是"跨域资源共享"(Cross-origin resource sharing)。在之前的文章中我们已经详细介绍了如何使用JSONP进行接口跨域请求,如果不了解的可以参...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
一、JavaScript的诞生JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha->LiveScript->Jav...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
大家上午好,大家经常听到XSS攻击这个词,那么XSS攻击到底是什么,以及如何防御大家清楚么?今天,小墨就给大家讲一下:XSS攻击的定义、类型以及防御方法。 什么是XSS攻击? XSS攻击全称...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
前面讲解了音视频编解码的基本知识,相信阅读过的朋友,都有个基本的认识。音视频除了存储,还如何传输呢?比如直播互动,网上课堂等,这些场景中,音视频是如何实现在网络中传输呢?今天...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
如今快手APP越来越火了,网友们在使用快手APP的过程中会遇到一些不喜欢的言论和需要维护自己应有的权益的时候,但自己并不知道要怎么去举报和怎么维护自己的权益。 所以小编整...【详细内容】
2020-01-16   CORS跨域  点击:(1)  评论:(0)  加入收藏
相信很多朋友买新车过后,都发现汽车上有个ECO按钮,很多朋友都不知道他是干嘛的,那汽车上的“ECO”是干啥用的呢?开启后到底能不能省油呢?如果可以省油,那为什么很多车主都不用它?今...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
每个人都喜欢好看的人物肖像照片,无论是拍摄亲人、朋友、还是孩子,都需要我们了解一些基础的相机设置后,才能顺利、快速的拍摄。在这篇文章中,我们将与您分享一些拍摄肖像的最佳...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
如今的汽车已经是今非昔比,各种高科技和黑科技产品被不断应用到汽车上,使得车辆的驾驶操控性和舒适性得到了充分提升。而车辆之所以可以经受各种路面的考验,最大的功臣莫过于悬...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
在当今世界,对各种框架的了解是非常重要的。它们使你可以快速开发原型和实际项目。在本文中分享了12个与Java开发、移动app开发、Web开发和大数据相关的有用框架。希望可以能...【详细内容】
2020-01-16   CORS跨域  点击:(1)  评论:(0)  加入收藏
互联网的迅速发展,软件行业成了更多年轻人的就业选择。HTML5简单易学门槛低,是Web时代前端开发超好用的工具。而HTML5开发人员的就业薪资也远远高于其他行业。资料显示,初级HTM...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
【redis是什么】redis是一个开源的、使用C语言编写的、支持网络交互的、可基于内存也可持久化的Key-Value数据库。redis的官网地址,非常好记,是redis.io。(特意查了一下,域名后...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
任何计算机系统中,添加用户都是最重要的事之一;本文着重介绍如何在 Linux 系统中添加用户。...【详细内容】
2020-01-16   CORS跨域  点击:(1)  评论:(0)  加入收藏
Centos1、开启防火墙systemctl start firewalld2、开放指定端口firewall-cmd --zone=public --add-port=1111/tcp --permanent命令含义:--zone #作用域--add-port=1111/tcp #...【详细内容】
2020-01-16   CORS跨域  点击:(1)  评论:(0)  加入收藏
通过VMware演示如何对硬盘进行分区、格式化、挂载使用大家平时可能大多数使用Windows系统,对于挂载硬件设备可能很少有人了解其中的原理。例如:平时使用u盘直接插入电脑,大家有...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
Linux中如何添加SWAP上一篇我们演示了Linux中如何对硬盘进行分区、格式化、挂载使用。本篇演示如何添加交换分区我们接着上一篇来操作。1、 查看交换分区在生产环境中,交换分...【详细内容】
2020-01-16   CORS跨域  点击:(1)  评论:(0)  加入收藏
acl概述acl (全称Advanced C Library)是一个跨平台(支持LINUX,WIN32,Solaris,MacOS,FreeBSD)的网络通信库及服务器编程框架,同时提供更多的实用功能库。用户通过该库可以非常容易地...【详细内容】
2020-01-16   CORS跨域  点击:(0)  评论:(0)  加入收藏
我们在Java项目中会处理流,流使用完成后一定要注意关闭流,但是在关闭流时有一些注意点容易忽略,我们以文件流为例先看两个错误实例。/** * 错误实例1 * * @author 今日头条号...【详细内容】
2020-01-16   CORS跨域  点击:(2)  评论:(0)  加入收藏
临近春节,年终奖到手,手里的钱如何“过节”最划算呢?其实这一问题,银行早已为你“操碎了心”。...【详细内容】
2020-01-16   CORS跨域  点击:(1)  评论:(0)  加入收藏
当地时间1月15日,经过中美两国经贸团队的共同努力,在平等和相互尊重的基础上,中美双方在美国首都华盛顿正式签署第一阶段经贸协议。协议文本包括序言、知识产权、技术转让、食...【详细内容】
2020-01-16   CORS跨域  点击:(1)  评论:(0)  加入收藏
再过半个月就是春节了,然后就是铺天盖地的聚会以及到各种亲戚家拜年的场景。 这种喜庆的节日,如果不化妆,肤色不好,外加厚重的黑眼圈会显得整个人没有精气神,而太浓的妆感长辈们...【详细内容】
2020-01-15   CORS跨域  点击:(2)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条