SpringBoot:解决前后端请求跨域问题(详细教程)

ops/2025/2/22 22:53:08/
文章目录
  • 一、前言
  • 二、解决方式
    • 2.1 使用 @CrossOrigin 注解(简单方便,适用于单个或少量接口)
    • 2.2 全局配置跨域(适用于整个项目中大量接口都需要跨域的情况)
    • 2.3 使用过滤器来处理跨域(更底层的实现方式,灵活性高但代码相对复杂一点)
  • 三、结语

一、前言

在前后端交互的项目中,首先要解决的就是跨域问题,这个问题是由于浏览器的同源策略导致的,这种策略是一种安全机制,它要求网页的协议、域名以及端口都完全相同,才允许一个域下的网页去访问另一个域的资源,只要这三者中有一个不同,就会产生跨域的情况。具体如下:

在这里插入图片描述


二、解决方式

以下是几种在 Spring Boot 中解决跨域问题的常见方式:

2.1 使用 @CrossOrigin 注解(简单方便,适用于单个或少量接口)

@CrossOrigin 注解是 Spring 框架提供的用于处理跨域请求的一种便捷方式,通过在控制器类或者具体的方法上添加该注解,来告知 Spring 允许来自特定源的跨域请求,它会在响应头中自动添加相应的跨域相关的 HTTP 头信息,从而使浏览器能正常接收跨域响应。

  • 在控制类上添加注解:

    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;

    @RestController
    @RequestMapping(“/api”)
    @CrossOrigin(origins = “http://localhost:5173”) // 表示 http://localhost:5173 这个路径下的网页可以访问当前控制类
    public class TestController {

    @GetMapping("/data")
    public String getData() {return "数据被获取到了";
    }
    

    }

  • 在接口上添加注解:

    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;

    @RestController
    @RequestMapping(“/api”)
    public class TestController {

    @GetMapping("/data")
    @CrossOrigin(origins = "http://localhost:5173") // 表示 http://localhost:5173 这个路径下的网页可以访问当前方法
    public String getData() {return "数据被获取到了";
    }
    

    }

注意:@CrossOrigin 注解可以不写里面的 origins 参数,不写表示可以被所有的路径访问。


2.2 全局配置跨域(适用于整个项目中大量接口都需要跨域的情况)

通过实现 WebMvcConfigurer 接口并重写 addCorsMappings 方法,在 Spring Boot 的配置类中统一设置跨域相关规则,这样就能对项目中所有符合规则的请求都自动处理跨域问题,无需在每个控制器类或者方法上单独添加注解了。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {// 一天private static final long MAX_AGE = 24 * 60 * 60;@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")   // 对当前路径下的所有请求都应用当前的跨域配置.allowedOrigins("*") // 允许的跨域源,可以通过逗号隔开,也可以用 * 表示允许所有源;.allowedMethods("*") // 允许的请求方法,可以指定具体的,如:"GET"、"POST"、"PUT"、"DELETE".allowedHeaders("*") // 允许的请求头类型,可以指定具体的,如:"Content-Type", "Authorization.maxAge(MAX_AGE);    // 设置请求最大有效时长,在这个时长内,重复的请求就不会发送预检请求}
}

2.3 使用过滤器来处理跨域(更底层的实现方式,灵活性高但代码相对复杂一点)

通过自定义一个过滤器,在请求进入 Spring Boot 的业务逻辑处理之前拦截请求,并在响应返回给浏览器之前手动设置跨域相关的 HTTP 头信息,以此来实现跨域请求的允许。这种方式能更加灵活地根据业务需求定制跨域处理逻辑,比如可以针对不同的请求路径、请求类型等进行差异化的跨域设置。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {// 1天private static final long MAX_AGE = 24 * 60 * 60;@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 设置访问源地址,表示所有路劲都可以访问corsConfiguration.addAllowedHeader("*"); // 设置访问源请求头,表示所有的请求头都可以corsConfiguration.addAllowedMethod("*"); // 设置访问源请求方法,表示所有的请求方法都可以corsConfiguration.setMaxAge(MAX_AGE);    // 设置请求最大时长,表示在这个时长内重复的请求不会再次发送预检请求source.registerCorsConfiguration("/**", corsConfiguration); // 对当前路径下的所有请求都应用当前的跨域配置return new CorsFilter(source);}
}

三、结语

这篇文章是通过在后端来解决跨域问题的,而如果想在前端解决的话,我们一般会使用一个代理服务器来解决。首先让前端开发环境下的请求先发送到同域的代理服务器,然后由代理服务器将请求转发到真正的后端接口所在的不同域地址,对于前端来说,它感觉只是在和同域的服务器进行交互,从而绕过了浏览器的同源策略限制,实现跨域请求。

至此,本文结束,如果这篇文章对您有所帮助,希望可以点赞、收藏加关注,感谢。

请添加图片描述



http://www.ppmy.cn/ops/159764.html

相关文章

WebMvcConfigurer 介绍

WebMvcConfigurer 介绍 1. 什么是WebMvcConfigurer 介绍2. WebMvcConfigurer接口常用的方法3. 使用WebMvcConfigurer实现跨域4. 使用WebMvcConfigurer配置拦截器5. 使用WebMvcConfigurer配置静态资源5.1 配置外部目录(本地文件系统)详细解释 6. 使用 Web…

高电服务器托管:企业IT基础设施的可靠之选

高电服务器托管服务,是指企业将自身高耗电的服务器设备或算力服务器设备交由专业托管公司进行管理和维护的一种服务模式。托管公司提供包括安全机房环境、网络设备、系统软件以及专业技术人员等全方位支持,使企业能够专注于核心业务的开发和运营。 高电…

详解AbstractQueuedSynchronizer(AQS)源码

引言 上篇文章讲解了CountDownLatch源码,底层是继承了AQS基类调用父类和重写父类方法实现的,本文将简介AQS源码和架构设计,帮助我们更深入理解多线程实战。 源码架构 1. 状态变量 state AQS 使用一个 int 类型的变量 state 来表示同步状态…

A与B组件自动对齐与组装,无映射直接补偿。

网上针对组装的从视觉到控制动作,要不就是收费,要不就是简单介绍。这么详细的比较难找~ 手下留情,不喜勿喷! Show time~ 分步解决方案: 标定阶段(Calibration) 9点张氏标定(每个位置A1、A2、B1、B2): 使用机械手在相机视野内沿Z字形路径移动,覆盖9个点(XY方…

CTF-内核pwn入门1: linux内核模块基础原理

本文由A5rZ在2025-2-18-21:00编写 1.可加载内核模块是什么? 内核可加载模块(*.ko 文件)是内核的一种扩展机制,可以在不重启系统的情况下加载和卸载代码。它们允许动态地向内核添加新的功能或支持。 以下是一些内核模块常见的功能&…

[qt5学习笔记]Application Example示例程序源码解析

开发环境问题 vs2022下直接打开ui、ts文件失败 解决办法如下图, 设置designer独立运行。估计是嵌入运行存在些许bug。 同理,ts编辑工具linguist也存在这个问题。 qrc rc的编辑嵌入编辑都正常,但分离式更稳定可靠。 qt creator编译失败 原…

在华为云部署应用,通过阿里云代理调用第三方接口的利弊与解决方案

以下是一篇针对“在华为云上部署应用,通过阿里云代理服务器调用第三方接口”所做的问答与分析整理而成的博文示例,供您发布或分享。内容涵盖了方案现状、主要弊端以及详细的优化与解决思路。 在华为云部署应用,通过阿里云代理调用第三方接口的利弊与解决方案 一、背景介绍 …

华为固态电池引发的思索

华为固态电池真牛! 超长续航:单次充电即可行驶3000公里 极速充电:五分钟内充满80% 极致安全:不可燃、不漏液 长寿命设计:循环寿命达10000次以上 如上是华为电池展示的优势项,每一条都让我们心动不已。…