浏览器跨域请求

news2024/11/24 20:06:17
跨域是浏览器的一种同源策略,所以该概念只存在于通过浏览器访问服务里。

如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据 浏览器上就会报错,这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

 

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:8001/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。 但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截

1|2CORS(跨域资源共享)简介

 

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。 整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。 因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

1|3CORS基本流程

 

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。 浏览器发出CORS简单请求,只需要在头信息之中增加一个Origin字段。 浏览器发出CORS非简单请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

1|4CORS两种请求详解

只要同时满足以下两大条件,就属于简单请求。

 

(1) 请求方法是以下三种方法之一: HEAD GET POST (2)HTTP的头信息不超出以下几种字段: Accept Accept-Language Content-Language Last-Event-ID Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件,就属于非简单请求。浏览器对这两种请求的处理,是不一样的

 

* 简单请求和非简单请求的区别? 简单请求:一次请求 非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。 * 关于“预检” - 请求方式:OPTIONS - “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息 - 如何“预检” => 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过 Access-Control-Request-Method => 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过 Access-Control-Request-Headers

支持跨域,简单请求: 服务器设置响应头:Access-Control-Allow-Origin = ‘域名’ 或 ‘*’ 支持跨域,复杂请求: 由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。 “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers

关于'服务端接收到预检请求后,分析CORS请求头中的内容,决定是否允许该请求',这个详细流程和步骤是怎么样的,具体做了哪些检查?

预检请求的目的是为了让服务端知道客户端的跨域请求信息,并决定是否允许这个跨域请求。下面是服务端处理CORS预检请求的详细流程和步骤:

1. 收到CORS预检请求后,服务端首先校验该请求的method是否为OPTIONS,如果不是OPTIONS,则服务端直接返回HTTP错误码 405 Method Not Allowed。

2. 服务端进一步检查CORS请求头中的Origin字段,确认该请求是否来自允许的域名。如果Origin字段不在允许的域名列表中,服务端会直接返回HTTP错误码403 Forbidden。

3. 如果Origin字段在允许的域名列表中,服务端会检查CORS请求头中的Access-Control-Request-Method字段,判断实际请求是否支持该方法。如果服务器端不支持该方法,会直接返回HTTP错误码 405 Method Not Allowed。

4. 如果服务器端支持该方法,继续检查CORS请求头中的Access-Control-Request-Headers字段,确认所有请求头字段是否都被允许。如果有请求头字段没有在服务器端允许的请求头列表中,服务端会拒绝该请求并返回HTTP错误码 403 Forbidden。

5. 如果所有检查都通过了,服务端可以根据配置的跨域策略,通过在响应头中设置Access-Control-Allow-*字段来告诉浏览器可以执行跨域请求。例如,设置Access-Control-Allow-Origin字段为请求头中的Origin值,表示允许该域名跨域访问。

6. 服务端发送响应头信息,告诉浏览器CORS预检请求允许通过。浏览器收到允许的响应头信息后,会发送第二个实际请求,并在请求头中携带CORS相关的信息,服务端接收到这个实际请求后,可以进行正常的数据处理并返回响应数据。

综上所述,服务端在处理CORS预检请求时,需要根据CORS请求头中的Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段,对该跨域请求的域名、方法和请求头信息进行有效性检查,并根据服务端的跨域配置策略,返回恰当的响应头信息来告诉浏览器是否允许该跨域请求。

如果浏览器发送了一个OPTIONS请求,服务端怎么知道是需要校验跨域请求?

当浏览器发送OPTIONS请求时,服务端会检查此请求是否携带了CORS相关的请求头信息。如果携带了跨域请求的请求头信息,则服务端会理解该请求是一次CORS请求,进行进一步的处理。

具体来说,CORS请求头中至少包含了Origin字段,该字段表示请求的源,服务端通过跟自己存储的允许跨域请求的域名列表对比,判断该请求是否允许跨域。

另外,在OPTIONS请求中还会包含Access-Control-Request-Method和Access-Control-Request-Headers两个字段,用于告诉服务端实际请求将使用哪种方法和请求头字段。服务端可以根据这些信息,判断实际请求是否被允许。

如果服务端检查后发现该请求是一次跨域请求,就会根据CORS策略决定是否向浏览器发送响应头信息,告知浏览器是否允许实际请求跨域。如果服务端认为该跨域请求不合法,则会拒绝该请求,不做任何处理或者返回适当的错误信息。

不同的配置CORS的方式:

1.可以通过@Corsorigin注解配置

https://blog.csdn.net/securitit/article/details/113251401

2.可以通过springboot 配置文件里配置,示例如下:

通过配置文件的方式是全局生效,如果想在方法级别控制CORS,就用@Corsorigin注解吧,

这两种方法实现的原理都是通过spring 拦截器实现,大概步骤如下:

/** 在配置文件中很难实现方法级别的跨域请求控制,因为配置文件是全局生效的,无法对单独的方法进行定制。

如果你需要实现方法级别的跨域请求控制,可以考虑使用框架提供的注解或拦截器来进行处理。

以Spring Boot框架为例,你可以在方法上使用@CrossOrigin注解指定方法允许的跨域请求来源,也可以使用拦截器对特定的方法进行跨域请求控制。以下是使用拦截器实现方法级别跨域请求控制的一个例子:
**/

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new CorsInterceptor()).addPathPatterns("/hello");
    }
}

public class CorsInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if (handler instanceof HandlerMethod) {
            HandlerMethod handlerMethod = (HandlerMethod) handler;
            CrossOrigin annotation = handlerMethod.getMethodAnnotation(CrossOrigin.class);
            if (annotation != null) {
                String[] allowedOrigins = annotation.origins();
                String origin = request.getHeader("Origin");
                if (Arrays.asList(allowedOrigins).contains(origin)) {
                    response.setHeader("Access-Control-Allow-Origin", origin);
                    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
                    response.setHeader("Access-Control-Allow-Headers", "content-type");
                    return true;
                }
                response.setStatus(HttpServletResponse.SC_FORBIDDEN);
                return false;
            }
        }
        return true;
    }
}


这个例子中,我们在添加拦截器的方法上指定了拦截的路径为`/hello`,然后在拦截器的preHandle方法中读取被拦截的方法上的@CrossOrigin注解,判断当前请求的来源是否被允许。如果允许,就设置响应头,否则返回403 Forbidden状态码。这样,我们就可以在方法级别上进行跨域请求的控制了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/630460.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue3 ElementPlus Dialog封装 (二:使用provide inject)

引言 上一章Vue3 ElementPlus Dialog封装 (一:使用props emit) propemit实现的方法用于父子组件比较方便, 跨多层次组件比较麻烦 vue3 中 还提供了provide和inject方法供组件间通信(参考官网图片), 本篇使用该方法实现上章效果 实现原理 参考…

K8S之Ingress 对外暴露应用(十四)

• Ingress为弥补NodePort不足而生 • Pod与Ingress的关系 • Ingress Controller • Ingress 规则配置 一,Ingress为弥补NodePort不足而生 NodePort存在的不足: • 一个端口只能一个服务使用,端口需提前规划 • 只支持4层负载均衡二&#x…

九耶丨阁瑞钛伦特-大型计算机硬件组成(二)

TSO: TSO是Time Sharing Option的缩写,用户可以通过TSO命令和系统进行交互式工作。TSO命令直接使用并不方便,所以IBM又在TSO下开发了程序产品ISPF/PDF(Interactive System Productivity/Program Development Facility)其中ISPF支…

VAPS XT4.2 与 VS2013 安装

VAPS XT4.2 与 VS2013 安装 安装顺序 安装 VS2013安装 License tool安装 VAPS XT4.2VS2013 的安装 安装 VS2013,安装内容全选,安装路径选择D盘;VS2013 激活,网上找密钥,比如:【BWG7X-J98B3-W34RT-33B3R-JVYW9】;电脑重启;Win+R,sysdm.cpl,打开环境变量,查看VS相关的…

Linux SSH命令实战教程,提升你的服务器管理基本功!

前言 大家好,又见面了,我是沐风晓月,本文是专栏【linux基本功-基础命令实战】的第62篇文章。 专栏地址:[linux基本功-基础命令专栏] , 此专栏是沐风晓月对Linux常用命令的汇总,希望能够加深自己的印象&am…

java生成、识别条形码和二维码

一、概述 使用 zxing 开源库 Zxing主要是Google出品的,用于识别一维码和二维码的第三方库主要类:BitMatrix 位图矩阵MultiFormatWriter 位图编写器MatrixToImageWriter 写入图片 可以生成、识别条形码和二维码 内置三种尺寸:enum Size {SMALL, MIDDLE, …

【习题】习题 2 - 编写程序求当前机器的字节序

欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、字节序影响 3、示例代码 4、总结 1、缘起 在计算机中,字节序(Byte Order)指定了…

一文带你彻底掌握Java 中的Stream流(详细)

本文目录 学习目标中间操作Filter(过滤)Map(转换)Sorted(排序)Distinct(去重)Limit(限制)Skip(跳过)Peek(展示) 终止操作forEach(循环)Collect(收集)Count(计数)Reduce(聚合)AnyMatch(任意匹配)AllMatch(全部匹配)NoneMatch(无匹配) 使用Stream流的优缺点:优点&…

投票活动小程序开发搭建

由于小程序是基于微信开发者工具编写的,因此我先介绍一下需要使用的工具和技术: - 微信开发者工具:用于开发、调试和发布小程序。 - 小程序云开发:用于存储数据和进行后端逻辑处理。 - uni-app框架:uni-app 是一个使…

组件更新的底层逻辑

第一种更新:组件更新的逻辑,当修改了相关状态,组件会更新 1.触发shouldComponentUpdate 周期函数:是否允许更新 shouldComponentUpdate(nextProps, nextState) { // nextState: 存储要修改的最新状态 // this. state:存储的还是修改前的状态…

分布式系统常见的数据分区算法

文章目录 顺序分区轮询分区算法时间片轮转分区算法数据块分区算法业务主题分区算法 哈希分区节点取模分区算法一致性哈希分区算法(重点)1.Hash环2.容错性和可扩展性3.数据倾斜4.带有限负载的一致性哈希算法5.带虚拟节点的一致性哈希算法 虚拟槽分区算法&…

个人开发者或学生必备的100元云服务器大全

100元以内云服务器配置大全,预算100元可以买到什么配置的云服务器?100元可以选到腾讯云2核2G3M带宽轻量服务器、阿里云2核2G3M带宽轻量应用服务器、UCloud香港轻量应用云主机30M带宽、华为云HECS云服务器2核4G配置等,阿腾云分享预算100元可选…

华为OD机试真题 JavaScript 实现【数列描述】【2023 B卷 100分】,附详细解题思路

一、题目描述 有一个数列a[N] (N60),从a[0]开始,每一项都是一个数字。数列中a[n1]都是a[n]的描述。其中a[0]1。 规则如下: a[0]:1 a[1]:11(含义:其前一项a[0]1是1个1,即“11”。表示a[0]从左到右,连续出…

GitOps的12个痛点

如今很多团队采用GitOps作为标准部署流程,这篇文章总结了GitOps的12个痛点,从而帮助我们在采用这一实践的过程中更好的理解GitOps的优势和缺陷,选择适合自己的解决方案。原文:The pains of GitOps 1.0[1] GitOps作为软件发布实践有…

Git与Gitee远程仓库的系列操作

⭐作者介绍:大二本科网络工程专业在读,持续学习Java,努力输出优质文章 ⭐作者主页:逐梦苍穹 ⭐所属专栏:Git ⭐如果觉得文章写的不错,欢迎点个关注一键三连😉有写的不好的地方也欢迎指正&#x…

Prometheus插件安装(mysql_exporter)

简介 mysql_exporter是用来收集MysQL或者Mariadb数据库相关指标的,mysql_exporter需要连接到数据库并有相关权限。既可以用二进制安装部署,也可以通过容器形式部署,但为了数据收集的准确性,推荐二进制安装。 一,下载安…

ASO优化之如何维护品牌词

App Store的关键词优化一般可以分为品牌词,竞品词和行业词,长度要控制在100字符以内。所以我们可以通过投放竞品词,将竞争对手的部分的流量占为己有,维护品牌词的有效方式有:1,率先拿下自己家的品牌词。 2…

『 前端三剑客 』:CSS选择器

文章目录 一 . 基本语法二 . CSS 引入方式2.1 内部样式表2.2 内联样式表2.3 外部样式表 三 . CSS选择器3.1 基础选择器1 . 标签选择器2 . 类选择器3 . id 选择器4 . 通配符选择器 3.2 复合选择器5 . 后代选择器6 . 子代选择器7 . 并集选择器8 . 伪类选择器 上一篇文章我们介绍了…

ProGuard 进阶系列(一): 运行源代码

在前面的文章深入 Android 混淆实践:ProGuard 通关秘籍和深入 Android 混淆实践:多模块打包爬坑之旅中,已经讲到了如何在 Android 中使用 ProGuard,以及如何自定义实现混淆规则的生成。为了更深入地理解 ProGuard 的细节&#xff…

Python3数据分析与挖掘建模(11)复合分析-分组分析与实现示例

1. 分组分析 1.1 概述 分组与钻取是数据分析中常用的技术,用于对数据进行聚合和细分分析。它可以帮助我们从整体数据中获取特定维度的汇总信息,并进一步钻取到更详细的子集数据中进行深入分析。 分组(Grouping)是指根据某个或多…