当前位置: 首页 > news >正文

springboot中有哪些方式可以解决跨域问题

文章目录

  • 什么是跨域
  • 解决方案
    • @CrossOrigin注解
    • 实现WebMvcConfigurer接口
    • CorsFilter过滤器
    • 如何选择?

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。

Talk is cheap , 先看代码。

在Springboot项目中新建一个测试接口,端口号默认8080

@RestController
@RequestMapping("test")
public class TestController {@GetMapping("1")public String test1(){System.out.println("1");return "111111111";}
}

再新建一个HTML页面,在页面内访问上述接口:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script>function cors() {$.get('http://localhost:9090/test/1', function(data) {alert(data)});}</script>
</head>
<body>
<button onclick="cors()">CORS</button>
</body>
</html>

Idea中打开,并在浏览器访问, 点击CORS按钮,你猜会发生什么?


是的,你猜对了,浏览器控制台会出现如下提示,就是告诉你跨域了。

cors.html:1 Access to XMLHttpRequest at 'http://localhost:9090/test/1' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

什么是跨域

介绍跨域之前要介绍一下同源策略,什么是同源策略呢?

同源策略是浏览器的一种安全策略,用于限制一个网页文档或脚本如何与其他源的资源进行交互。同源策略的核心思想是:网页文档或脚本只能与加载它们的同一个源下的资源进行交互,而不能与不同源的资源直接进行数据交换。

同源策略有如下3点要求:

  1. 协议相同:两个页面的协议必须相同(如都是 https)。
  2. 域名相同:两个页面的域名(包括子域名)必须相同。
  3. 端口相同:如果指定了端口号,两个页面的端口号必须相同。

举个例子:

  • 如果页面 A 加载自 https://www.example.com,那么它只能与 https://www.example.com 下的资源进行交互,比如可以通过 JavaScript 发送 AJAX 请求。
  • 页面 A 不能直接与 https://api.example.nethttp://sub.example.com 这些不同源的资源进行交互,因为它们的协议、域名或端口不同。

为什么要有同源策略?

如果没有同源策略,网站A就可以访问网站B的Cookie,Cookie中可能会存在用户的token或者其他敏感信息,通过这些敏感信息可能会发送一些伪请求到网站B,从而窃取一些数据。这就相当于你们家什么安全措施都不做,别人想进就进,那可不丢家吗。

跨域或者叫跨域资源共享(Cross-origin resource sharing, CORS) :当浏览器访问不同源的网站时,就会产生跨域问题。

为了让不同源之间的能够访问,就要解决跨域问题。

解决方案

在Springboot中通常有3种方式:

  1. 使用**@CrossOrigin注解**
  2. 实现WebMvcConfigurer接口
  3. 使用CorsFilter过滤器

@CrossOrigin注解

@CrossOrigin注解可以作用于类或者方法级别,当作用于类级别时,表示该类中所有方法都可以实现跨域访问。当应用于方法级别时,表示该方法可以实现跨域访问。

举个例子:

@RestController
@RequestMapping("test")
public class TestController {@CrossOrigin(origins = "http://localhost:63342") // 仅允许来自localhost:63342的请求跨域@GetMapping("1")public String test1(){System.out.println("1");return "111111111";}
}

@CrossOrigin注解有如下属性:

  • origins:允许访问的源列表。可以指定一个或多个 URL,或者使用 * 来允许所有源。注意,如果 allowCredentials 设置为 true,则不能使用 *,必须明确指定源。

  • methods:允许的方法列表,如 GETPOSTPUT 等。同样,也可以使用 * 来允许所有方法。

  • allowedHeaders:请求中允许的头列表。使用 * 可以允许所有头。

  • exposedHeaders:响应中暴露给客户端的头列表。这些头会被添加到 Access-Control-Expose-Headers 响应头中。

  • allowCredentials:是否允许发送 cookies。如果设置为 true,浏览器将允许前端 JavaScript 访问响应中设置的 Cookies 和 HTTP 认证信息。这个选项和配置的域建立了很高的信任度,不过呢,也因为暴露了像 CookiesCSRF 令牌这类敏感的用户特定信息,增加了应用程序被攻击的可能性。 当 allowCredentialstrue 时,origins 不能设置为 *

  • maxAge:预检请求的结果可以被缓存多久(以秒为单位)。这可以减少不必要的预检请求,提高性能。

  • originPatternsSpring 5.3 版本开始新增的属性。允许使用通配符模式来定义允许访问的域名。比如,originPatterns={https://*.domain1.com},就是可以匹配以 domain1.com 结尾的网站。

  • allowPrivateNetworkSpring 5.3.32 版本开始新增的属性。是否允许来自私有网络地址的请求通过跨域请求。

实现WebMvcConfigurer接口

WebMvcConfigurer接口是Spring MVC的一个配置接口,通过它可以自定义配置Spring MVC的行为,包括但不限于视图解析器静态资源处理消息转换器拦截器跨域等。

只要实现WebMvcConfigurer接口重写addCorsMappings方法即可。

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 对所有路径生效.allowedOriginPatterns("*") // 允许源地址的通配符
//                .allowedOrigins("http://localhost:63342") // 允许源地址http://localhost:63342.allowCredentials(true) // 是否允许发送Cookie.allowedMethods("GET", "POST", "DELETE", "PUT") // 允许的请求方法.allowedHeaders("*"); // 允许的请求头}
}

CorsRegistry 是一个用于配置跨域的工具类。

CorsRegistry 类中的属性和@CrossOrigin注解中的跨域属性基本相同,作用也是一样的,这里不做过多介绍。

CorsFilter过滤器

CorsFilter 过滤器,见名知意就是一个用于处理跨域请求的过滤器。具体用法如下:

@Configuration
public class CorsFilterConfig {@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("http://localhost:63342");config.setAllowCredentials(true);config.addAllowedMethod("*");config.addAllowedHeader("*");
//        config.addAllowedOriginPattern("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();// 匹配路径source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

看它的用法是不是特别熟悉,是的,没错,它也和@CrossOrigin注解中的跨域属性基本相同。

如何选择?

既然@CrossOrigin注解、WebMvcConfigurer配置类、CorsFilter过滤器都能解决跨域问题,那使用哪个好呢?

先来看一下它们之间的区别:

  • WebMvcConfigurer:用于全局配置CORS策略,适合需要全局配置的场景。
  • CorsFilter:可以精细配置CORS策略,并适用于对不同路径设置不同的CORS策略。
  • @CrossOrigin:用于局部配置,非常适合单个Controller或方法需要不同的CORS策略的情况。

在实际项目中,可以根据需求选择合适的方式来解决跨域问题。如果项目中的跨域需求较为统一,且希望有一个全局性的解决方案,那么WebMvcConfigurer可能是一个不错的选择。如果需要对跨域请求进行更细粒度的控制,或者项目中的跨域需求较为分散,那么CorsFilter或@CrossOrigin可能更适合。

所以,没有好不好,只有合不合适,合适你的就是最好的。

以上在Springboot中解决跨域的三种方式其实都是对CorsConfiguration跨域配置类的封装,感兴趣的可以看一看CorsConfiguration跨域配置类。

相关文章:

springboot中有哪些方式可以解决跨域问题

文章目录 什么是跨域解决方案CrossOrigin注解实现WebMvcConfigurer接口CorsFilter过滤器如何选择&#xff1f; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 Talk is cheap &#xff0…...

Temporal Dynamic Quantization for Diffusion Models阅读

文章目录 AbstractIntroductionBackgrounds and Related Works2.1 扩散模型2.2 量化2.3 量化感知训练和训练后量化 TemporalDynamic Quantization3.1 量化方法3.2 扩散模型量化的挑战3.3 TDQ模块的实现3.4 工程细节时间步的频率编码TDQ模块的初始化 Experimental SetupResults5…...

828华为云征文|华为云Flexus X实例性能实测:速度与稳定性的完美结合

828华为云征文&#xff5c;华为云Flexus X实例性能实测&#xff1a;速度与稳定性的完美结合 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、实践环境介绍2.1 本次实践环境规划2.2 本次实践介绍 …...

【PyTorch】图像分割

图像分割是什么 Image Segmentation 将图像每一个像素分类 图像分割分类 超像素分割&#xff1a;少量超像素代替大量像素&#xff0c;常用于图像预处理语义分割&#xff1a;逐像素分类&#xff0c;无法区分个体实例分割&#xff1a;对个体目标进行分割全景分割&#xff1a;…...

如何快速建立自己的异地互联的远程视频监控系统,通过web浏览器可以直接查看公网上的监控视频(上)

目录 一、需求 二、方案 2.1、计划方案 2.2、实施准备 2.2.1所需配置的产品和服务 2.2.1.1云主机 &#xff08;1&#xff09;选择云平台 &#xff08;2&#xff09;配置云服务器 2.2.2.2视频监控平台软件 &#xff08;1&#xff09;视频监控平台软件 &#xff08;2&am…...

实验2思科网院项目2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习

实践练习 2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习physical-mode 实验拓扑 相关设备配置 实验目标: 第 1 部分&#xff1a;构建网络并配置设备的基本设置 第 2 部分&#xff1a;配置和验证单区域 OSPFv2 的基本部署 第 3 部分&#xff1a;优化和验…...

Nginx实战经验分享:从小白到专家的成长历程!

目录 一、Nginx概述1、Nginx简介&#xff08;1&#xff09;事件驱动模型&#xff08;2&#xff09;异步处理&#xff08;3&#xff09;模块化设计&#xff08;4&#xff09;高性能&#xff08;5&#xff09;反向代理&#xff08;6&#xff09;负载均衡&#xff08;7&#xff09…...

从画质设置看游戏引擎(其一)

前往我的博客&#xff0c;获取无广告&#xff0c;更好的阅读体验 1. 抗锯齿&#xff08;Anti-Aliasing&#xff09; 1.1 锯齿问题的起因 在三维模型的世界中&#xff0c;模型是连续的&#xff0c;但是屏幕像素是不连续&#xff0c;是离散的&#xff1b; 即当一个圆形显示在显…...

#git 问题failed to resolve head as a valid ref

问题如下&#xff1a; 解决方法&#xff1a; 1、运行 git fsck --full 可以查看具体error信息&#xff0c;一般都是head索引问题 2、.git\refs\heads\xxx&#xff08;当前分支&#xff09;txt编辑器打开显示乱码&#xff0c;而不是hash编码 3、在.git\logs\refs\heads\xxx&a…...

YOLOv11,地瓜RDK X5开发板,TROS端到端140FPS!

YOLOv11 Detect YOLOv11 Detect YOLO介绍性能数据 (简要) RDK X5 & RDK X5 Module 模型下载地址输入输出数据公版处理流程优化处理流程步骤参考 环境、项目准备导出为onnxPTQ方案量化转化使用hb_perf命令对bin模型进行可视化, hrt_model_exec命令检查bin模型的输入输出情况…...

Python精选200Tips:181-182

针对图像的经典卷积网络结构进化史及可视化 针对图像的经典卷积网络结构进化史及可视化&#xff08;续&#xff09;P181--MobileNet【2017】模型结构及创新性说明模型结构代码MobileNet V1版本MobileNet V2版本MobileNet V3 版本Small版本Large版本 P182--EfficientNet【2019】…...

SpringCloud 配置 feign.hystrix.enabled: true 不生效

SpringCloud 配置 feign.hystrix.enabled: true 不生效的原因 feign 启用 hystrix feign 默认没有启用 hystrix&#xff0c;添加配置&#xff0c;启用 hystrix feign.hystrix.enabledtrue application.yml 添加配置 feign:hystrix:enabled: true启用 hystrix 后&#xff0c;访…...

9.24-k8s服务发布

Ingress 使用域名发布 K8S 服务 部署项目 一、先部署mariadb [rootk8s-master ~]# mkdir aaa [rootk8s-master ~]# cd aaa/ [rootk8s-master aaa]# # 先部署mariadb [rootk8s-master aaa]# # configmap [rootk8s-master aaa]# vim mariadb-configmap.yaml apiVersion: v1 ki…...

UI设计师面试整理-作品集展示

在UI设计师的面试中,作品集展示是非常关键的一环。它不仅展示了你的设计技能和风格,也让面试官了解你的设计思维和解决问题的能力。下面是如何有效地准备和展示你的作品集的建议: 1. 选择合适的项目 ● 多样性:选择能展示你在不同领域或平台上的设计能力的项目。确保作品集…...

CMU 10423 Generative AI:lec10(few-shot、提示工程、上下文学习)

文章目录 1 概述2 摘录2.1 zero-shot 和 few-shot一、Zero-shot Learning&#xff08;零样本学习&#xff09;特点&#xff1a;工作原理&#xff1a;优点&#xff1a;缺点&#xff1a; 二、Few-shot Learning&#xff08;少样本学习&#xff09;特点&#xff1a;工作原理&#…...

做数据抓取工作要如何选择ip池

选择合适的IP池对于数据抓取工作至关重要。一个优质的IP池可以提高抓取的效率和成功率&#xff0c;同时减少被目标网站封禁的风险。以下是选择IP池时需要考虑的一些关键因素&#xff1a; 1. IP类型 住宅IP&#xff1a;住宅IP通常来自真实用户&#xff0c;难以被识别为代理。它…...

防止电脑电池老化,禁止usb或者ac接口调试时充电

控制android系统&#xff0c;开发者模式&#xff0c;开启和禁止充电 连接 Android 手机到电脑的 USB 端口。 下载并安装 Android Debug Bridge (ADB) 工具[1]。 USB&#xff1a; 在命令行中输入 adb shell dumpsys battery set usb 0&#xff0c;以禁止 USB 充电。 在命令…...

智权半导体/SmartDV力助高速发展的中国RISC-V CPU IP厂商走上高质量发展之道

作者&#xff1a;Karthik Gopal SmartDV Technologies亚洲区总经理 智权半导体科技&#xff08;厦门&#xff09;有限公司总经理 进入2024年&#xff0c;全球RISC-V社群在技术和应用两个方向上都在加快发展&#xff0c;中国国内的RISC-V CPU IP提供商也在内核性能和应用扩展…...

利用vue-capper封装一个可以函数式调用图片裁剪组件

1. 效果 const cropData await wqCrop({prop:{img,autoCrop: true, // 是否开启截图框maxImgSize: 600,autoCropWidth: 30,canMove: true, // 图片是否可移动canMoveBox: true, // 截图框是否可移动fixedBox: false, // 截图框是否固定}});console.log(cropData);使用wqCrop会…...

在系统开发中提升 Excel 数据导出一致性与可维护性的统一规范与最佳实践

背景&#xff1a; 在系统开发过程中&#xff0c;数据导出为 Excel 格式是一个常见的需求。然而&#xff0c;由于各个开发人员的编码习惯和实现方式不同&#xff0c;导致导出代码风格不一。有的人使用第三方库&#xff0c;有的人则自定义实现。这种多样化不仅影响了代码的一致性…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...