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

已于 2024-09-11 16:21:06 修改
阅读量365 收藏 8
点赞数 8
分类专栏： 项目案例 Spring Security 文章标签： spring boot 前端 后端 java spring
于 2024-09-11 14:39:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42631788/article/details/142139398
版权

文章目录

现象

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

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 {

    @Override
    public 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 {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            .authorizeRequests()
            .anyRequest().authenticated(); // 配置你的安全规则
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public 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 {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public 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);
    }

    @Override
    public 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 {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        // 配置跨域过滤器
        http
            .csrf().disable() // 禁用 CSRF
            .authorizeHttpRequests(authz -> authz
                .anyRequest().authenticated() // 根据需要配置权限
            )
            .addFilter(corsFilter()); // 添加自定义的 CORS 过滤器

        return http.build();
    }

    @Bean
    public 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 中是推荐的做法。

箬敏伊儿
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CORS error错误 has been blocked by CORS policy前端请求浏览器出错
m0_67265464的博客
03-03 1万+
问题简述 通过vue的axious拦截全局请求在请求头上加了identify和token字段后，访问后端zuul网关，浏览器出现错误，导致后台接收不了http包的自定义header字段，并不能很好的进行网关的鉴权。 错误如下: Access to XMLHttpRequest at ‘http://127.0.0.1:27000/api/v1/index-infos’ from origin ‘http://’ has been blocked by CORS policy: Request header
跨域问题 has been blocked by CORS policy The request client is not a secure context
m0_67391401的博客
03-07 3211
问题描述，前端请求后端接口出现了跨域，get请求是OK 的，POST 请求有问题。请求链路是前端请求接口先到服务端的网关系统，再由网关系统转发到其他业务系统中。 第一步、首先看两个相关的服务是不是没有加跨域的配置。经检查发现两台服务都加了跨域代码，如下： 业务系统解决跨域代码： @Configuration public class CorsConfiguration { @Bean public WebMvcConfigurer corsConfiguration() {
spring boot前端访问出现跨域问题has been blocked by CORS policy
zaq977684的博客
04-06 3659
1、跨域问题has been blocked by CORS policy 解决方法：服务端配置一个跨域类，注意：需要把 .allowedOrigins("*")改成 .allowedOriginPatterns("*")// 允许所有域名 如下： /** * 跨域配置类 */ @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() {
Vue-cli解决前端跨域问题has been blocked by CORS policy
qq_44174803的博客
02-10 2237
前言 解决前端跨域问题有三种方式可以实现: 1.CORS方式：   这种方式一般和前端人员无关，需要后端人员在服务器中返回支持前端请求的相应头Access-Control-Allow-Origin，从而使得前端浏览器可以直接访问服务器。但是这种解决跨域的方式会导致任何前端都能访问到该服务器上的资源，因此存在较大的危险。 2.JSONP方式：   JSONP解决跨域问题实际上不是一个官方所推出的方式，是程序员们为了解决跨域问题而设计出来的一种方法。其巧妙之处在于使用script标签通过CDN方式来引入需要访问
Vue中Axios发起接口请求出现跨域问题:has been blocked by CORS policy
第一段代码的博客
04-15 7293
blocked by CORS policy:Access-Control-Allow-Origin通常指的就是浏览器判断请求跨域问题导致. 解决方案: 1.前端设置代理的方式: 在vue.config.js的配置文件中,配置代理伪装请求的方式,解决跨域: 详细配置和配置属性解释,见代码注释 devServer: { port: 9999, // open: true, // 设置代理 proxy: { //配置跨域 '/api': { tar
解决跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present
热门推荐
不完美的红烧肉的博客
10-21 38万+
说一下做项目时需要用到html2canvas做项目截图踩到的跨域坑。 项目需要拉取用户的头像，而linkedin和微信的头像存放于cdn中，这边涉及到的跨域问题。 坑1： 由于跨域，画布被污染，不能调用 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。 按网上说的做， 配置 useCORS: true, ...
解决跨域问题（从浏览器读取本地文件）from origin ‘null‘ has been blocked by CORS policy
m0_62172798的博客
04-26 4012
在学习d3.js的过程中，通过d3.csv()读取本地csv文件的过程中出现了跨域错误，错误如下：Access to fetch at 'file:///D:/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%EF%BC%88%E7%A1%95%EF%BC%89/htmlcssjsvue/code/d3.js/data222.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests a
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
qq_44021627的博客
08-02 638
这是由于所有使用JavaScript的浏览器都会支持同源策略。只要有一个不同，就会当作跨域请求。此时还有浏览器同源策略的保护，是防止不同源（域、协议或端口）的网页之间进行恶意操作。所以综上，前端后端处在不同的域时就会报该错误。在一些前后端不同源的项目中，前端向后端发起请求时，有时候无法正常向后端请求到服务，F12查看控制台会发现报错。然后找到请求页面，在axios的请求接口里面只写。然后找到请求页面，在axios的请求接口里面只写。如果使用vue-cli脚手架创建的项目,找到。举个例子，如果请求接口为。
解决跨域has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘，利用Proxy反向代理
我还起舞了的博客
11-21 3609
我们要配置反向代理的原因是：因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据，这是浏览器的跨域限制，我们不能在浏览器上显示后端的数据，但是服务器端没有跨域限制，所以可以让我们自己的服务器（项目运行，会启动一台服务器），去请求后端服务器，拿到数据，然后再传给我们前端。反向代理服务器的应用：往这个接口发请求，被拦截到了，凡是往这个接口发请求的，反向代理服务器，会在前面加上target域名 ，往真实的地址去请求。在vue.config.js文件中进行以下配置proxy，具体配置信息可以看下文。
Spring Boot之数据访问集成入门
一个老Java开发的自白
09-07 1474
Spring Boot简化了数据访问层开发，支持多种数据库（如MySQL、Redis）和访问技术（如Spring Data JPA、JdbcTemplate、MyBatis）。通过自动配置和依赖管理，开发者可快速搭建数据访问层。本文概述了Spring Data JPA、JdbcTemplate、MyBatis的使用及其代码示例，并介绍了数据库连接配置、依赖管理、自动配置和自定义配置的方法。
深入理解Spring Boot结合MyBatis调用MySQL，并实现主从复制读写分离
J老熊
09-04 1833
MyBatis作为一款灵活的持久层框架，与Spring Boot结合使用，可以为开发者提供高效、简洁的数据库访问层。本文将详细讲解如何在Spring Boot项目中结合MyBatis调用MySQL，并实现主从复制的读写分离。我们将以电商交易系统为案例，通过实际代码示例展示如何进行配置和实现。
Spring Boot详解
weixin_47260194的博客
09-07 1341
Spring Boot 是为简化 Spring 开发而生的，它为开发者屏蔽了许多底层细节，让你能够专注于业务逻辑，同时又保持了 Spring 强大的功能性和灵活性。通过自动配置、内嵌服务器和丰富的 starter 依赖，Spring Boot 能帮助开发者快速构建、部署和运行应用，是现代 Java 开发的利器。在学习 Spring Boot 的过程中，建议你多做项目实践，理解它的核心原理和如何与各种常用的技术栈结合应用。
Spring boot启动过程详解
chyohn的博客
09-05 1049
本篇主要介绍spring boot在启动过程中都做了哪些工作，重点介绍在spring容器ApplicationContext刷新前都做了哪些准备，本篇以源码解释为主，示例为辅进行梳理其过程。Spring boot整个启动过程分为3部分，分别是1.准备环境配置，2. 准备Spring容器并刷新容器，3. 容器刷新后处理。每个部分又有如下图所示的步骤，本篇详细讲解这些步骤。
Redis 在 Spring Boot 项目中的实际应用及问题解决
最新发布
lssffy的博客
09-11 1278
分布式锁是一种确保分布式系统中共享资源的安全访问的机制。通过分布式锁，多个进程在同一时刻只能有一个进程对资源进行操作，保证了操作的原子性和一致性。
Spring Boot之DevTools介绍
一个老Java开发的自白
09-07 1221
Spring Boot DevTools 是一组强大的开发工具，通过提供自动重启、实时属性更新、依赖项的热替换等功能，极大地提高了开发者的开发效率。在开发过程中，合理地使用 DevTools 可以帮助开发者更快地迭代和验证代码，从而加速产品的开发周期。然而，在生产环境中应该关闭 DevTools，以避免对性能产生不必要的影响。
基于Spring Boot的火车订票管理系统
heye0910032的博客
09-07 813
随着网络技术的不断发展，火车订票管理系统逐渐由传统的线下操作转变为线上服务，为用户提供了更加便捷的购票渠道。本系统采用B/S架构，利用JAVA语言开发，结合Spring Boot框架和MySQL数据库，实现了管理员和用户的不同功能需求。管理员模块包括用户管理、车次信息管理、订单管理等，而用户模块则提供购票、改签和退票等服务。系统通过严格的测试，确保了功能的完整性和稳定性，有效地提高了火车订票的信息化管理水平。
基于Spring Boot的旧物置换网站
MAMA6681的博客
09-08 784
这个示例提供了一个非常基础的框架，你可以在此基础上扩展更多的功能，如物品搜索、评论系统、即时通讯等。在实际开发过程中，还需要考虑诸如错误处理、事务管理、日志记录等方面的问题。此外，确保所有的API调用都是安全的，并且正确处理用户的输入数据，防止SQL注入等安全风险。如需帮助可私信联系。
vite 项目中怎么解决跨域 , has been blocked by CORS policy
09-07
在 Vite 项目中解决跨域问题，主要有两种方法： 1. 使用代理：Vite 提供了一个 devServer.proxy 选项，你可以在 vite.config.js 或者 dev 脚本中配置代理来解决跨域问题。例如，你可以在 vite.config.js 中添加以下代码： ```javascript module.exports = { server: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } } ``` 上述代码将会把以 "/api" 开头的请求代理到 "http://api.example.com"。 2. 设置 CORS 头部：如果你对后端有控制权，你可以在后端的响应中设置 CORS 头部来解决跨域问题。在 Express.js 中，你可以通过安装 `cors` 中间件并使用它来设置 CORS 头部。例如： ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 其他路由处理代码 app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 这样就会允许所有来源的请求访问你的 API。 以上两种方法都可以帮助你在 Vite 项目中解决跨域问题。选择哪种方法取决于你的具体需求和后端环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值