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

Springboot 2.7+解决跨域问题,到底是在SpringBoot中添加拦截器还是修改Nginx配置

文章目录

    • 1摘要
    • 2 核心代码
      • 2.1 SpringBoot 全局跨域拦截器
      • 2.2 Nginx 配置跨域处理
      • 2.3 Nginx 和 SpringBoot 同时添加允许跨域处理会怎么样?
    • 3 推荐参考资料

1摘要

跨域问题报错信息:

Referrer Policy:strict-origin-when-cross-origin

跨域问题是在前后端分离的情况下一个非常常见的问题,通常添加一个跨域拦截器就可以解决,但是在后台添加后还是出现跨域问题,到底是配置错误还是哪里出了问题?

本文将基于 SpringBoot 2.7 从多种角度解决跨域问题。

2 核心代码

2.1 SpringBoot 全局跨域拦截器

核心跨域拦截代码

    /*** 跨域处理** @param registry*/@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowCredentials(true).allowedMethods("GET","HEAD","POST","PUT","PATCH","DELETE","OPTIONS","TRACE").allowedOriginPatterns("*").allowedHeaders("*").maxAge(3600);}

以上为高版本 SpringBoot 的跨域拦截器代码,SpringBoot 版本高于 2.4,SpringBoot 2.7 就用上边的代码。

关于 allowedOriginPatterns 方法说明:

点击 allowedOriginPatterns 方法,打开 Spring 的源码可以看到一下信息:

org.springframework.web.servlet.config.annotation.CorsRegistration#allowedOriginPatterns
	/*** Alternative to {@link #allowedOrigins(String...)} that supports more* flexible patterns for specifying the origins for which cross-origin* requests are allowed from a browser. Please, refer to* {@link CorsConfiguration#setAllowedOriginPatterns(List)} for format* details and other considerations.* <p>By default this is not set.* @since 5.3*/public CorsRegistration allowedOriginPatterns(String... patterns) {this.config.setAllowedOriginPatterns(Arrays.asList(patterns));return this;}

源码中一个关键信息点since 5.3, allowedOriginPatterns 是 Spring 框架 5.3 开始加入的

在 Maven 仓库中依赖信息可以看到 Springboot 2.7.18 使用的 Spring 版本是 5.3.31

仔细排查可发现 SpringBoot 2.4 开始是使用 Spring 5.3 的,因此高于 SpringBoot 2.4 的版本需要使用 allowedOriginPatterns 方法来设置允许跨域来源。低版本允许跨域来源的方法为 allowedOrigins

Maven 仓库查看SpringBoot 中依赖 Spring 的版本信息的地址为:

https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-test/2.7.18

image-20241207110625671

如果不使用 allowedOriginPatterns 方法,还是使用旧的方法 allowedOrigins 则会报以下异常:

	 msg:When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.,trace:org.springframework.web.cors.CorsConfiguration.validateAllowCredentials(CorsConfiguration.java:473)org.springframework.web.servlet.handler.AbstractHandlerMapping.getHandler(AbstractHandlerMapping.java:532)org.springframework.web.servlet.DispatcherServlet.getHandler(DispatcherServlet.java:1266)org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1048)org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006)

从报错信息中也可以看到Spring已经说明需要使用新的方法了。

完整的跨域处理拦截器代码:

package com.ljq.stock.alert.web.interceptor;import com.ljq.stock.alert.common.constant.TokenConst;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;/*** @Description: web 应用配置* @Author: Mr.lu*/
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {@BeanWebInterceptor webInterceptor() {return new WebInterceptor();}/*** 添加拦截器** @param registry*/@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(webInterceptor()).addPathPatterns("/**").excludePathPatterns(TokenConst.NO_TOKEN_API);}/*** 资源过滤** @param registry*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/swagger-ui/**").addResourceLocations("classpath:META-INF/resources/webjars/springfox-swagger-ui/");registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:META-INF/resources/webjars/");registry.addResourceHandler("/**").addResourceLocations("classpath:META-INF/resources/","classpath:resources/", "classpath:static/","classpath:public/");}/*** 跨域处理** @param registry*/@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowCredentials(true).allowedMethods("GET","HEAD","POST","PUT","PATCH","DELETE","OPTIONS","TRACE").allowedOriginPatterns("*").allowedHeaders("*").maxAge(3600);}}

其中 WebInterceptor 主要用于做 Token 鉴权拦截器,这里不在拓展。

2.2 Nginx 配置跨域处理

Nginx 允许跨域的配置如下:

    # HTTPS serverserver {listen       443 ssl;server_name  xxx.com;access_log  /var/log/nginx/xxx.access.log  main;ssl_certificate      /etc/ssl/certs/xxx.com.crt;ssl_certificate_key  /etc/ssl/certs/xxx.com.key;ssl_session_cache    shared:SSL:1m;ssl_session_timeout  5m;ssl_ciphers  HIGH:!aNULL:!MD5;ssl_prefer_server_ciphers  on;location / {proxy_pass http://127.0.0.1:6666;proxy_set_header  Host $host;proxy_set_header   X-real-ip $remote_addr;proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST,PUT, DELETE, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection upgrade;proxy_read_timeout 600s;if ($request_method = 'OPTIONS') {return 204;}}}

其中核心跨域配置为:

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST,PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

也就是说即时 SpringBoot 项目中不配置跨域拦截器,直接在 Nginx 中配置允许跨域就可以视线跨域访问了,使用效果是一样的

2.3 Nginx 和 SpringBoot 同时添加允许跨域处理会怎么样?

如果 Nginx 配置了允许跨域请求,同时 SpringBoot 也添加了跨域拦截器,那会怎么样?是不是变得更强了?

实际测试的效果是不能跨域了。

浏览器报错如下:

image-20241207115608320

看后台接口日志是请求已经有返回了,但是前端还是提示跨域异常了(CROS error

点击具体的请求可以看到以下信息:

image-20241207113709757

请求状态码是 200,表明服务器请求通了,下边提示

Referrer Policy:strict-origin-when-cross-origin

这表明当前的请求是跨域请求

下边是关键点,返回的头里边包含了两个 access-control-allow-origin header,其中一个是 * 也就是允许跨域,另一个是当前请求的域名(非SpringBoot后台项目服务的域名),这还有正正的负的道理?

解决办法也很简单,要么删掉 Nginx 的跨域配置,要么删掉 SpringBoot 项目中的跨域拦截器。

这里作者推荐删除 Nginx 的跨域配置,因为如果项目迁移,Nginx 配置不属于项目代码,到时候出现明明好好的代码却跑不通了,那就是写代码的人的问题了。

至此,一个浏览器跨域导致的生产事故大案已经完美告破!!!

3 推荐参考资料

springboot和springframework版本依赖关系

Spring Boot Starter Test Maven 仓库依赖

nginx解决跨域和spring解决跨域

SpringBoot解决跨域问题/Nginx中配置解决跨域问题

解决The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘*, *‘, but only one is allowed

SpringBoot 2/3 实现跨域报错:When allowCredentials is true, xxxxxxx , using “allowedOriginPatterns“ instead

相关文章:

Springboot 2.7+解决跨域问题,到底是在SpringBoot中添加拦截器还是修改Nginx配置

文章目录 1摘要2 核心代码2.1 SpringBoot 全局跨域拦截器2.2 Nginx 配置跨域处理2.3 Nginx 和 SpringBoot 同时添加允许跨域处理会怎么样&#xff1f; 3 推荐参考资料 1摘要 跨域问题报错信息: Referrer Policy:strict-origin-when-cross-origin跨域问题是在前后端分离的情况…...

Spring中Bean的作用域深入剖析与技术实践

前言 Spring框架作为Java企业级应用开发中的中流砥柱&#xff0c;提供了强大的依赖注入&#xff08;DI&#xff09;和面向切面编程&#xff08;AOP&#xff09;等功能。在Spring框架中&#xff0c;Bean的作用域&#xff08;Scope&#xff09;是一个非常重要的概念&#xff0c;…...

Python爬虫实战:抓取拼多多商品详情数据(基于pdd.item_get接口)

在当前的电商市场中&#xff0c;拼多多以其独特的拼团模式和优惠价格吸引了大量用户&#xff0c;成为继淘宝、京东之后的又一大电商平台。对于数据分析和市场研究者来说&#xff0c;获取拼多多的商品详情数据显得尤为重要。本文将介绍如何使用Python爬虫技术&#xff0c;通过调…...

工具类-列表请求工具 useList

useList 用于列表请求的基于 vue 3 的 hooks&#xff0c;接收请求函数、请求参数等数据&#xff0c;自动生成请求请求函数&#xff0c;分页信息等 本文有涉及到 http 请求工具和接口返回格式的内容&#xff1a; http 工具&#xff1a;一个基于 axios 封装的请求工具Response…...

Scala中的正则表达式01

规则类型具体规则示例说明单字符大多数字符匹配自身正则表达式 abc&#xff0c;文本 abca 匹配 a&#xff0c;b 匹配 b&#xff0c;c 匹配 c方括号 [ ][ ] 定义字符集&#xff0c;匹配其一[abc]&#xff0c;文本 a、b 或 c[abc] 匹配 a、b 或者 c排除字符集 [^ ][^ ] 开头加 ^&…...

基于SpringBoot的养老院管理系统的设计与实现

一、前言 随着人口老龄化的加剧&#xff0c;养老院作为老年人养老的重要场所&#xff0c;其管理的高效性和科学性显得尤为重要。传统的养老院管理方式多依赖人工操作&#xff0c;存在信息记录不及时、不准确&#xff0c;管理流程繁琐&#xff0c;资源调配困难等问题。利用信息技…...

Ansible变量详解(变量定义+变量优先级+变量注册+层级定义变量+facts缓存变量)

本篇文章详细给大家介绍Ansible变量&#xff0c;变量适合管理剧本中每个项目的动态值&#xff0c;或是某些值在多个地方重复使用&#xff0c;如果将此值设置为变量再在其他地方调用会方便许多。会用变量&#xff0c;才算真正会用Ansible&#xff0c;话不多说&#xff0c;直接开…...

面向对象系统的分析和设计

来源&#xff1a;《设计模式精解-GOF23种设计模式解析》 作者&#xff1a;k_eckel k_eckels mindview - 博客园 (cnblogs.com) --------- 面向对象系统的分析和设计实际上追求的就是两点&#xff1a; &#xff08;1&#xff09;高内聚 &#xff08;2&#xff09;低耦合 …...

Vue 提供了Transition,可以帮助你制作基于状态变化的过渡和动画

官方文档&#xff1a;https://cn.vuejs.org/guide/built-ins/transition.html Transition​ Vue 提供了两个内置组件&#xff0c;可以帮助你制作基于状态变化的过渡和动画&#xff1a; <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用…...

视频编辑技术:一键生成混剪视频的AI技术应用

随着视频内容的爆炸式增长&#xff0c;视频编辑技术也在不断进步。本文将探讨如何利用AI技术&#xff0c;实现一键生成混剪视频&#xff0c;并自动添加配音和字幕&#xff0c;以提高视频编辑的效率和质量。 AI技术在视频编辑中的应用 AI技术在视频编辑领域的应用越来越广泛&am…...

Android11 MTK 开机默认启动热点

1、需求&#xff1a;开机后不锁屏&#xff0c;默认打开热点&#xff0c;且长时间没有设备连接热点时保证热点也是打开的。 2、开机后不锁屏&#xff1a; 路径&#xff1a;vendor/mediatek/proprietary/packages/apps/SettingsProvider/res/values/defaults.xml<bool name&q…...

Vue Web开发(二)

1. 项目搭建 1.1. 首页架子搭建 使用Element ui中的Container布局容器&#xff0c;选择倒数第二个样式&#xff0c;将代码复制到Home.vue。 1.1.1.下载less &#xff08;1&#xff09;下载less样式 npm i less   &#xff08;2&#xff09;下载less编辑解析器 npm i less…...

Linux-实用操作

文章目录 一. 各类实用小技巧(快捷键)1. ctrl c 强制停止2. ctrl d 退出登出3. history 查看历史命令4. !命令前缀&#xff0c;自动匹配上一个命令5. ctrl r&#xff0c;搜索历史命令6. ctrl a | e&#xff0c;光标移动到命令开始或结束7. ctrl ← | →&#xff0c;左右跳…...

Elasticsearch:使用 Elastic APM 监控 Android 应用程序

一、前言 人们通过私人和专业的移动应用程序在智能手机上处理越来越多的事情。 拥有成千上万甚至数百万的用户&#xff0c;确保出色的性能和可靠性是移动应用程序和相关后端服务的提供商和运营商面临的主要挑战。 了解移动应用程序的行为、崩溃的发生和类型、响应时间慢的根本…...

Go的简单问题问答

基础问题回答 Go 的主要特点是什么&#xff1f; 简洁&#xff1a;语法简化&#xff0c;减少复杂性。并发&#xff1a;内置 Goroutine 和 Channel&#xff0c;支持轻量级并发。静态类型&#xff1a;强类型语言&#xff0c;编译时检查错误。跨平台&#xff1a;编译生成独立的二进…...

【攻防实验】溯源与取证分析实验

溯源与取证分析实验 溯源取证分析作为网络攻防过程中重要环节&#xff0c;准确找到攻击者的入侵线索(尤其是攻击突破口、攻击IP地址、域名、工具等信息)&#xff0c;对于企业或者团队安全运营团队来说都是必备技能。常规攻击取证过程中往往会结合流量、Web访问日志、终端系统或…...

THREE.js 入门(一)xyz坐标系

一、坐标系概念 在 three.js 中&#xff0c;相机的默认朝向是沿着 Z 轴的负方向。也就是说&#xff0c;默认情况下&#xff0c;相机会沿着 Z 轴的负方向“看”到场景中的对象&#xff0c;而 X 轴和 Y 轴分别对应水平方向和垂直方向。换句话说&#xff0c;相机的默认位置是 (0,…...

AUTOSAR CP中基于通信模块(COM)的Transformer-R24的规范导读

该文档是关于 AUTOSAR CP中基于通信模块&#xff08;COM&#xff09;的Transformer的规范说明&#xff0c;主要内容包括引言、相关文档、约束与假设、功能规范、API 规范、配置规范等&#xff0c;旨在为汽车电子系统开发中基于 COM 的Transformer提供全面的技术规范和指导。 一…...

ubuntu20.04安装anygrasp_sdk

ubuntu20.04安装anygrasp_sdk采坑记录 安装ME的教程看上一篇,现在来看anygrasp安装问题grasp_detection、grasp_trackinglicense申请demo文件的运行注意的地方到这以为大功告成了,然后出现了一个numpy版本不匹配问题最后还有一个问题就是修改demo.sh,不然没法可视化结果展示安…...

Spring完整知识点二

Spring注解开发 Spring是轻代码而重配置的框架&#xff0c;配置比较繁重&#xff0c;影响开发效率&#xff0c;所以注解开发是一种趋势&#xff0c;它能够代替xml配置文件&#xff0c;可以简化配置&#xff0c;提高开发效率Spring注解根据出现时间分类 Spring原始注解&#xf…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...