您当前的位置:首页 > 电脑百科 > 网络技术 > 网络知识

Cors 跨域基本原理

时间:2022-08-09 10:44:27  来源:  作者:弓长86说

为什么有了跨域这个东西

世上本没有路,走的人多了也就有了路。 跨域这算是这么一回事。 在 Web 的世界上本没有跨域这个东西,但架不住坏人越来越多,所以后来就有了跨域。

何出此言?

互联网刚出现的时候,是默认全开放的。也就是你说,你写的一个网站默认是允许所有人访问的。这一点非常符合互联网"互联互通"的精神本质。但后来人们却发现,事情好像有点变质变味。

比如说,Bob 写了一个网站让 Alice 访问,当 Alice 访问这个网站的时候,谁知 Eve 中途拦截了请求,在里面植入了 Eve 自己写的 Js 脚本。 这个脚本会源源不断的请求 Bob 网站的数据,并且通过浏览器发给 Eve。

 

Eve 的脚本此时此刻充当了小偷的角色,盗取数据并返回给 Eve。

既然第三方的 Js 有这样的危险,那么我们对这些 Js 脚本禁止执行怎么样? 必须不能! 你想想互联网中除了有坏人,也有好人呀。如果我们禁止所有 Js 脚本运行的话,那我们就无法使用网银了,电商平台了,甚至连绚丽多彩的 Web UI 都无法看到了。

既然不能禁止,也不能放任自流,那又该何去何从?所以引出了跨域,跨域简而言之,就是浏览器在发请求的时候,先询问一下服务器,你让我能做点啥?

为什么是浏览器

这是一个好主意,为什么跨域只出现在浏览器呢? 这也算是当前一个无解的事情,因为 Http 请求天生是无状态的,服务器无法区分这个请求和上个请求是否是同一个客户端发起。当无法判断是否为同一个客户端时,服务端也就无法判断这个请求是应该通过还是应该禁止。

所以跨域这件事只能下沉到浏览器来执行了。让浏览器承担第一道防火墙的责任。 毕竟能做浏览器的都是大厂,这点基本职业操守,浏览器厂商还是有的。

那话说回来,服务端就一点也不做么? 并不是的, 服务端限制来自服务端请求有另外方案,比如 Token、API Check 等方式。

因为 RestFul API 之间无状态,所以只能通过校验请求合法性,来变相控制对方是否有权限获取/变更数据。

浏览器如何实现跨域

浏览器通过协议+域名+端口这三者来判断是否属于跨域。 整理如下:

浏览器地址

准备访问地址

是否跨域

原因

http://www.bob.com

http://www.aclice.com

跨域

域名不一致

http://www.bob.com

https://www.aclice.com

跨域

协议、域名不一致

http://www.bob.com

https://www.bob.com

跨域

协议不一致

http://www.bob.com

http://www.bob.com:8080

跨域

端口不一致

http://www.bob.com

http://www.bob.com

不跨域

 

浏览器每次在发起请求的时候,都会经过这个逻辑判断。 如果判断需要跨域,那么就会先向服务端发起OPTIONS请求。OPTIONS请求是向服务器询问,你允许哪些外部域名访问你?如果服务端允许当前浏览器访问,浏览器再继续访问。如果不允许,那就此作罢。

 

如图所示, 浏览器通过 OPTIONS 请求询问服务端。 服务端回复只接受来自https://www.bob.com的请求。

如果当前浏览器是https://www.bob.com那么愉快的发起正式请求,如果浏览器不是https://www.bob.com。那么就此别过以后再见。

是不是感觉跨域好像很简单,也没有多么复杂。 事实也是这样的,跨域本身不复杂,复杂的里面的参数配置。

常见的参数配置

前面说过了,跨域的控制权限在服务端,不在客户端。 因此服务端如果需要支持跨域,那么需要将以下参数通过 OPTIONS 请求返回给客户端。

  • Access-Control-Allow-Origin: <URI>| *

用来标识谁可以访问我。 这个 header 只支持返回一个值,要么是特定外部 URI(https://www.devexp.cn),要么是"*"。 不接受其他值 如果服务端指定了具体的域名而非“*”,那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端:服务器对不同的源站返回不同的内容。

  • Access-Control-Expose-Headers: 允许浏览器可以访问哪些自定义 Header

默认情况下,浏览器只能读取最基本的响应头,Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。 如果服务端想让浏览器获取其他 Header,就需要通过这个 Header 来指定。 这个 Header 支持逗号分隔的多值

  • Access-Control-Max-Age: 预检请求的结果在多少秒内有效

如果每次请求都需要预检,那么浏览器工作压力大,而且也浪费带宽。所以服务端可以通过这个 Header 告诉浏览器,多长时间内免检。

  • Access-Control-Allow-Credentials: 是否允许客户端携带验证信息

默认客户端只能携带特定的 header 发给服务端,如果服务端允许验证身份信息的 header(Cookie)。那么通过将此 Header 置为 true 来解决此问题。


Access-Control-Allow-Credentials: true 时,其他控制 Header 就不能是"*"了。比如:

  1. 服务器不能将 Access-Control-Allow-Origin 的值设为通配符“_”,而应将其设置为特定的域,如:Access-Control-Allow-Origin: https://example.com。
  2. 服务器不能将 Access-Control-Allow-Headers 的值设为通配符“_”,而应将其设置为首部名称的列表,如:Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
  3. 服务器不能将 Access-Control-Allow-Methods 的值设为通配符“*”,而应将其设置为特定请求方法名称的列表,如:Access-Control-Allow-Methods: POST, GET
  • Access-Control-Allow-Methods: 表示实际请求可以是哪些请求

这个 Header 接受逗号分隔的多值

  • Access-Control-Allow-Headers: 表示实际请求可以携带的 Header

这个 Header 接受逗号分隔的多值

"豁免"的情况

不知为何,浏览器会豁免一些场景的跨域判断。 被豁免的场景称之为"简单请求",不被豁免的则称为"复杂请求"。

符合下面条件的就是简单请求:

  1. 是 GET、HEAD、POST 之一
  2. 只有 Accept、Accept-Language、Content-Language、Content-Type 这几个 Header
  3. Content-Type 的值仅限于下列三者之一:text/plAIn、multipart/form-data、Application/x-www-form-urlencoded

除此之外的请求都需要经过预检判断。

常见问题

  • 配置了跨域,浏览器仍然显示跨域错误?

首先判断是否满足跨域判断,然后检查服务端返回的
Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 是实际发起的值是否匹配。

  • OPTIONS 请求返回 204 还是 200?

这个问题仁者见仁,智者见智。 但目前绝大多数的配置指南都建议返回 204. 因为从语义上说 204 表示请求成功,但没有任何返回。所以比较适合 OPTIONS 请求场景。



Tags:跨域   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
什么是跨域请求?
跨域请求是指在Web开发中,当一个Web页面(或脚本)向不同源的服务器发起请求时,浏览器会根据同源策略(Same-Origin Policy)对这些请求进行限制。同源策略是一种安全机制,它规定了来自...【详细内容】
2023-12-27  Search: 跨域  点击:(112)  评论:(0)  加入收藏
通过实例理解Web应用跨域问题
在开发Web应用的过程中,我们经常会遇到所谓“跨域问题(Cross Origin Problem)”。跨域问题是由于浏览器的同源策略(Same-origin policy)[1]导致的,它限制了不同源(Origin:域名...【详细内容】
2023-11-20  Search: 跨域  点击:(163)  评论:(0)  加入收藏
解析Java中的跨域请求问题与解决方案
在现代 Web 开发中,由于浏览器的同源策略限制,跨域请求成为一个常见的挑战。Java 作为一种常用的后端语言,提供了多种解决跨域请求问题的方案。下面将深入探讨 Java 中的跨域请...【详细内容】
2023-11-17  Search: 跨域  点击:(235)  评论:(0)  加入收藏
跨域资源共享(CORS)在Spring Boot中的实现
随着Web应用程序的普及,跨域资源共享(CORS)已成为前端开发的重要组成部分。当一个Web应用程序需要从另一个域的前端页面发出请求时,就会遇到跨域问题。大多数现代浏览器由于安全...【详细内容】
2023-09-28  Search: 跨域  点击:(226)  评论:(0)  加入收藏
前端 Jsonp 跨域方案原理
JSONP(JSON with Padding)是一种常用的跨域数据请求策略,它的基本原理是利用 <script> 标签的 src 属性没有同源策略限制的特性来达到跨域的目的。我们来详细解析 JSONP 的工作...【详细内容】
2023-06-01  Search: 跨域  点击:(230)  评论:(0)  加入收藏
SpringBoot如何跨域配置?
1. 前言跨域,一个老生常谈的话题,不管前端后端,跨域都会遇到。而今天,我就跟大家分享一篇关于【跨域】的文章,希望能给大家带来点不一样的收获。2. 环境说明js复制代码环境说明:Wi...【详细内容】
2023-05-30  Search: 跨域  点击:(139)  评论:(0)  加入收藏
细解跨域以及跨域的解决方案
跨域,对于正在学习或者已经就业的前端同学而言,就是老朋友。只要涉及“请求”“前后端交互”“开发阶段”等关键字,都避不开跨域。同时它也是面试中最常出现的考点之一,面试官可...【详细内容】
2023-05-06  Search: 跨域  点击:(427)  评论:(0)  加入收藏
什么是跨域以及如何解决?通俗易懂带你彻底搞定
现在的web项目,很多都是前后端分离,特别容易出现跨域问题那么什么是跨域问题呢?本篇文章带你彻底从本质上弄明白什么是跨域问题以及如何解决一 跨域有什么现象?我们先看一下现象...【详细内容】
2022-10-19  Search: 跨域  点击:(484)  评论:(0)  加入收藏
前后端分离开发,Vue 如何处理跨域问题?
Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热,关于 Spring Boot 松哥已经写过多篇教程,公号后台回复 666 可以获取 PDF 链接。前后端分离的文章也写过好几篇了,...【详细内容】
2022-09-06  Search: 跨域  点击:(324)  评论:(0)  加入收藏
Cors 跨域基本原理
为什么有了跨域这个东西世上本没有路,走的人多了也就有了路。 跨域这算是这么一回事。 在 Web 的世界上本没有跨域这个东西,但架不住坏人越来越多,所以后来就有了跨域。何出此...【详细内容】
2022-08-09  Search: 跨域  点击:(339)  评论:(0)  加入收藏
▌简易百科推荐
学生偷看“不良网站”,手机上3个痕迹无法清除,网友:咋不早说
众所周知,中国的常规教育中,总是“谈性色变”,但在这个信息爆炸的互联网时代,即便是一些年纪很小的孩子,也能轻易接触到一些所谓的不良网站,因此这一方面的教育缺失,其实是很可怕的...【详细内容】
2024-03-28    叶姐生活指南  Tags:不良网站   点击:(11)  评论:(0)  加入收藏
什么是网络中的路由器?核心功能解释
路由器是互联网连接的核心元素,是一种允许多个设备连接到互联网,并促进将数据包转发到各自的目标地址的设备。使用动态路由技术,路由器检查数据并在各种可用路径中选择最有效的...【详细内容】
2024-03-07    千家网  Tags:路由器   点击:(31)  评论:(0)  加入收藏
过年该不该升级Wi-Fi 7路由?看完就知道
打开电商网站不难发现,从2023年第三季度到现在,Wi-Fi 7路由器新品越来越多。而且价格不再是高高在上,已经基本和Wi-Fi 6路由价格差不多了。看到这些Wi-Fi 7新品路由,不少朋友就...【详细内容】
2024-02-27    中关村在线  Tags:Wi-Fi   点击:(37)  评论:(0)  加入收藏
聊聊 Kubernetes 网络模型综合指南
这篇详细的博文探讨了 Kubernetes 网络的复杂性,提供了关于如何在容器化环境中确保高效和安全通信的见解。译自Navigating the Network: A Comprehensive Guide to Kubernete...【详细内容】
2024-02-19  云云众生s  微信公众号  Tags:Kubernetes   点击:(39)  评论:(0)  加入收藏
SSL协议是什么?关于SSL和TLS的常见问题解答
SSL(安全套接字层)及其后继者TLS(传输层安全)是用于在联网计算机之间建立经过身份验证和加密的链接的协议。尽管SSL协议在 1999年已经随着TLS 1.0的发布而被弃用,但我们仍将这些...【详细内容】
2024-02-06  IDC点评网    Tags:SSL协议   点击:(69)  评论:(0)  加入收藏
从零开始了解网络协议:TCP/IP详解
从零开始了解网络协议:TCP/IP详解 在当今数字化的时代,网络协议已经成为我们生活中不可或缺的一部分。作为互联网的基础,网络协议规定了数据如何在不同的网络设备之间传输。TC...【详细内容】
2024-02-01    简易百科  Tags:TCP/IP   点击:(59)  评论:(0)  加入收藏
BGP路由属性:互联网路由的灵活控制器
在互联网的庞大网络中,边界网关协议(BGP)是确保不同自治系统(AS)间路由信息有效交换的关键协议。然而,BGP的功能远不止于此。其核心组成部分,即BGP路由属性,赋予了BGP强大的灵活性,使...【详细内容】
2024-01-26  诺诺爱生活    Tags:互联网路由   点击:(40)  评论:(0)  加入收藏
简易百科之什么是网络延迟?
简易百科之什么是网络延迟?随着互联网的普及和发展,网络已经成为我们生活中不可或缺的一部分。然而,我们在使用网络时可能会遇到一种情况,那就是网络延迟。那么,什么是网络延迟呢...【详细内容】
2024-01-24    简易百科  Tags:网络延迟   点击:(148)  评论:(0)  加入收藏
网络延迟与网络速度有什么区别?分享具体的答案
通常,许多人抱怨网速测试。速度还是不错的,但是他们玩游戏的时候怎么会卡住,还是断开连接等等问题,这一系列问题始终困扰着大家。那么,网络延迟与网络速度有什么区别呢?请不要担心...【详细内容】
2024-01-24  萌新小郭    Tags:网络延迟   点击:(51)  评论:(0)  加入收藏
揭秘IP地址的网络威胁与攻击类型
在当今数字化时代,网络攻击已经成为网络安全的一大挑战。IP地址,作为互联网通信的基础,也成为网络威胁和攻击的焦点之一。本文将深入探讨不同类型的网络威胁和攻击,以及如何防范...【详细内容】
2024-01-22  IP数据云    Tags:IP地址   点击:(78)  评论:(0)  加入收藏
站内最新
站内热门
站内头条