springboot项目中 前端浏览器访问时遇到跨域请求问题CORS怎么解决?has been blocked by CORS policy

文章目录

    • 现象
    • 解决方案
      • 1. **全局配置 CORS**
      • 2. **使用 `@CrossOrigin` 注解**
      • 3. **配置 Spring Security**
      • 4. **自定义 CORS 过滤器**
    • `Spring Security 6.x 及其后续版本解决方案`
      • 1. 使用 `SecurityFilterChain` 配置 CORS
      • 2. 重要配置说明
      • 3. 在生产环境中的最佳实践

现象

前端浏览器访问时,报错:
在这里插入图片描述

Access to fetch at 'http://localhost:8080/api/signature/generate' from origin 'http://127.0.0.1:5500' ![has been blocked by CORS policy](https://i-blog.csdnimg.cn/direct/a6551b463e514483b4a7647469c87caf.png)
: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

解决方案

在 Spring Boot 项目中解决前端浏览器访问的 CORS (Cross-Origin Resource Sharing) 问题,可以通过以下几种方式来实现:

1. 全局配置 CORS

你可以通过配置类来全局设置 CORS 规则。这种方式适用于你希望为所有的控制器和端点设置统一的 CORS 配置。

示例代码:

import org.springframework.context.annotation.Bean;
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 WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:3000") // 允许的前端地址.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法.allowedHeaders("*") // 允许的头部信息.allowCredentials(true); // 是否允许携带凭证}
}

2. 使用 @CrossOrigin 注解

你可以在控制器方法或控制器类上使用 @CrossOrigin 注解来设置 CORS 策略。这种方式适用于你只希望为特定的端点设置 CORS 配置。

示例代码:

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 MyController {@CrossOrigin(origins = "http://localhost:3000")@GetMapping("/data")public String getData() {return "This is CORS-enabled data.";}
}

你也可以在控制器类上使用 @CrossOrigin 注解,这样会对该类下的所有方法生效:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:3000")
public class MyController {@GetMapping("/data")public String getData() {return "This is CORS-enabled data.";}
}

3. 配置 Spring Security

如果你的项目中使用了 Spring Security,你还需要在 Spring Security 的配置中设置 CORS。

示例代码:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.cors().and().authorizeRequests().anyRequest().authenticated(); // 配置你的安全规则}@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:3000").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true);}};}
}

4. 自定义 CORS 过滤器

你也可以定义一个自定义的 CORS 过滤器来处理跨域请求。

示例代码:

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;import org.springframework.stereotype.Component;@Component
public class SimpleCorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {HttpServletRequest httpRequest = (HttpServletRequest) request;response.setContentType("text/html;charset=UTF-8");response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");chain.doFilter(request, response);}@Overridepublic void destroy() {}
}

选择适合你项目需求的方式来配置 CORS,确保前端能够成功访问你的后端接口。

Spring Security 6.x 及其后续版本解决方案

在 Spring Security 6.x 及其后续版本中,cors() 方法已经被弃用,因此需要通过更现代的方式配置 CORS。可以直接通过 SecurityFilterChain 结合 CorsFilter 进行配置。

以下是基于 Spring Boot 3.3.2 和 Spring Security 的跨域配置示例:

1. 使用 SecurityFilterChain 配置 CORS

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;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.web.SecurityFilterChain;@Configuration
public class SecurityConfig {@Beanpublic SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {// 配置跨域过滤器http.csrf().disable() // 禁用 CSRF.authorizeHttpRequests(authz -> authz.anyRequest().authenticated() // 根据需要配置权限).addFilter(corsFilter()); // 添加自定义的 CORS 过滤器return http.build();}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true); // 允许客户端携带凭证(如 Cookies)config.addAllowedOriginPattern("*"); // 允许所有域名,生产环境可以改为特定域名config.addAllowedHeader("*"); // 允许所有请求头config.addAllowedMethod("*"); // 允许所有 HTTP 方法(GET, POST, PUT, DELETE 等)source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

2. 重要配置说明

  • config.addAllowedOriginPattern("*"):这个方法用于允许所有来源的请求,addAllowedOriginPattern 替代了以前的 addAllowedOrigin,并更灵活地支持正则表达式。
  • addAllowedMethod("*"):允许所有 HTTP 请求方法。
  • addAllowedHeader("*"):允许所有请求头。

3. 在生产环境中的最佳实践

为了确保安全,在生产环境中,建议将 addAllowedOriginPattern 限制为特定的域名,而不是使用 "*" 来允许所有来源。这样可以避免潜在的安全风险。

这个配置通过 CorsFilter 实现了跨域支持,而不是依赖已被弃用的 .cors() 方法。这种方式在 Spring 3.3.2 和 Spring Security 中是推荐的做法。

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

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

相关文章

【linux】进程控制(2)

3. 进程等待 1. 是什么 通过系统调用 wait/waitpid 对子进程的退出状态进行检测和回收的功能 2. 为什么 僵尸进程无法杀死,通过进程等待来杀掉它,进而解决内存泄漏的问题 (一)进程等待的方法 a. wait : 代码 wait : 等待任意一…

某仿soul欲音社交系统存在任意文件读取漏洞

1 阅读须知 技术文章仅供参考,此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直…

医院管理|基于java的医院管理系统小程序(源码+数据库+文档)

医院管理系统小程序 目录 基于java的医院管理系统小程序 一、前言 二、系统设计 三、系统功能设计 医生信息管理 排班信息管理 科室信息管理 科室预约 病历信息 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取:…

AVL树的模拟实现(插入,验证)

目录 前言 AVL树的概念 AVL树的旋转 旋转 左旋 右旋 左右旋 右左旋 AVL的insert的实现 AVL的验证 完整代码 总结 前言 本文会先将AVL树的旋转进行讲解, 然后再对代码进行实现和展示。 AVL树的概念 首先 AVL树 是一种平衡树, 平衡树是在二…

特斯拉的底牌

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

【每日一题】LeetCode 98.验证二叉搜索树(树、深度优先搜索、二叉搜索树、二叉树)

【每日一题】LeetCode 98.验证二叉搜索树(树、深度优先搜索、二叉搜索树、二叉树) 题目描述 给定一个二叉树的根节点 root,判断该二叉树是否是一个有效的二叉搜索树(BST)。有效的二叉搜索树需要满足以下条件&#xf…

TCP 拥塞控制:一场网络数据的交通故事

从前有条“高速公路”,我们叫它互联网,而这条公路上的车辆,则是数据包。你可以把 TCP(传输控制协议)想象成一位交通警察,负责管理这些车辆的行驶速度,以防止交通堵塞——也就是网络拥塞。 第一…

Modbus-RTU之C语言实现

Modbus-RTU之C语言实现 Modbus-RTU之C语言实现引言Modbus-RTU的C语言实现说明.h 文件.c 文件 总结 Modbus-RTU之C语言实现 引言 前面我们介绍过Modbus-RTU传输协议(RS-485软件层协议之Modbus-RTU),它是一种基于串口的通信协议。在这一节我们…

ssl 协议工作过程

ssl 协议工作过程 ChatGPT 说: ChatGPT SSL(Secure Sockets Layer)协议是用来确保网络通信安全的加密协议,已被TLS(Transport Layer Security)取代,但它的工作过程仍然是理解现代加密协议的重…

MySQL索引优化与B+树【后端 14】

MySQL索引优化与B树 在MySQL数据库中,索引是优化查询性能的关键技术之一。B树作为一种广泛使用的索引结构,在MySQL的InnoDB存储引擎中扮演着核心角色。本文将详细介绍B树的结构特点及其在MySQL索引优化中的应用。 B树的结构特点 B树是B-树的一个变体&a…

uni-app怎么使用uni-icons

首先在官网(uni-icons 图标 | uni-app官网)中找到下载地址 uni-icons 图标 - DCloud 插件市场 把这个插件下载下来。目录结构是这样的。我们找到uni_modules 把里面的uni-icons粘贴到自己的项目中 我是放在了我的components下面了 然后再页面中引用这个…

搜索功能技术方案

1. 背景与需求分析 门户平台需要实现对服务信息的高效查询,包括通过关键字搜索服务以及基于地理位置进行服务搜索。面对未来可能的数据增长和性能需求,选择使用 Elasticsearch 来替代 MySQL 的全文检索功能。这一选择的背景与需求可以总结为以下几点&am…

Rust程序结构与代码注释

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟,李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 3.1 Rust程序结构 我们从一个最简单的程序入手,来观察一个Rust的程序结…

关于前端知识中框架概念部分的详细介绍

1、为什么要学习流行框架? 企业:为了提高效率,因为时间就是金钱。开发人员:提高了开发效率发展进程: JS>JQuery>模板引擎>框架时代(Angular(2)、React、Vue)好处:不用直接…

揭秘蛇形机器人的主动SLAM算法和障碍物避让策略

更多优质内容,请关注公众号:智驾机器人技术前线 1.论文信息 论文标题:An active SLAM with multi-sensor fusion for snake robots based on deep reinforcement learning 作者:Xin Liu, Shuhuan Wen, Yaohua Hu, Fei Han, Hong…

文件IO编程

文章目录 文件描述符相关系统调用文件有关的系统调用文件操作函数--creat函数文件操作函数--open函数文件操作函数--read函数文件操作函数--write函数文件操作函数--close函数文件操作函数--lseek函数缓冲区的大小对性能的影响 实验:调用系统函数,实现文…

STM32 WDG看门狗

在大型项目中,BUG根本无法避免,因为可能的状态太多了,总有那么意想不到的情况发生, 所以,对于程序员,第一要要丰富的经验,避免一些常见的bug, 第二,程序要经常迭代&#…

集成学习(Ensembling Learning)

0. 来源 概念比较全,可以作为目录,前置知识讲得好,其他一般。 01.内容简介_哔哩哔哩_bilibili01.内容简介是集成学习:XGBoost, lightGBM的第1集视频,该合集共计19集,视频收藏或关注UP主,及时了…

【数据结构】排序算法系列——序言(附源码+图解)

作为基础算法的中流砥柱部分,排序算法一直都是计算机学习者们不可忽略的一部分。而其中的算法思想也蕴含着许多在今后的算法学习甚至是整个计算机技术的学习之中仍然熠熠生辉的算法思想,它们引领着我们不断探索算法的奥秘之处。所以,学习排序…

简单聊聊bait文件

场景:业务同事发现某云主机部署了企业主机安全,在该主机上发现了一个诱饵文件,显示注意:此文件是诱饵文件,用于防止重要文件被病毒加密。请勿修改或删除此文件。 解决方法:联系企业主机安全运维同事发现&am…