SpringBoot 配置CORS处理前后端分离跨域配置无效问题解析

这篇具有很好参考价值的文章主要介绍了SpringBoot 配置CORS处理前后端分离跨域配置无效问题解析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

浏览器有跨域限制,非同源策略(协议、主机名或端口不同)被视为跨域请求,解决跨域有跨域资源共享(CORS)、反向代理和 JSONP的方式。本篇通过 SpringBoot 的资源共享配置(CORS)来解决前后端分离项目的跨域,以及从原理上去解决跨域配置不生效的问题。

准备工作

使用前后端分离开源项目 youlai-boot + vue3-element-admin 做跨域请求测试 。

其中 vue3-element-admin 默认通过 vite + proxy 前端反向代理解决跨域,如果想关闭方向代理只需修改 baseURL 即可:

// request.ts
const service = axios.create({
  //baseURL: import.meta.env.VITE_APP_BASE_API,  // 前端反向代理解决跨域的配置
  baseURL: "http://localhost:8989", // 后端通过配置CORS解决跨域的配置, http://localhost:8989 是后端接口地址
  timeout: 50000,
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
});

配置 CORS 允许跨域

一般情况在项目添加以下配置即可解决浏览器跨域限制。

/**
 * CORS 资源共享配置
 *
 * @author haoxr
 * @date 2022/10/24
 */
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1.允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2.允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3.允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4.允许凭证
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

CORS 允许跨域原理

CorsFilter 读取 CorsConfig 配置通过 DefaultCorsProcessor 给 response 响应头添加 Access-Control-Allow-* 以允许跨域请求能够被成功处理。

响应头参数 作用
Access-Control-Allow-Origin 允许访问的源地址
Access-Control-Allow-Methods 允许访问的请求方法
Access-Control-Allow-Headers 允许访问的请求头
Access-Control-Allow-Credentials 是否允许发送 Cookie 等身份凭证
Access-Control-Max-Age 缓存预检请求的时间

核心是 DefaultCorsProcessor# handleInternal 方法

CORS 配置失效原理分析

但。。。有的项目按照如上配置允许跨域请求成功了,但有些项目却不生效?

其实就是一个结论:有中断响应的过滤器在 CorsFilter 之前执行了,也就无法执行到 CorsFilter,自然 CorsConfiguration 中的配置形同虚设。

常见的场景:项目中使用了 Spring Security 安全框架导致 CORS 跨域配置失效。

接下来就 Spring Security 导致 CORS 配置失效展开分析。

在 ApplicationFilterChain#internalDoFilter 添加断点,然后通过改造后(移除反向代理)的 vue3-element-admin 发出跨域请求。

可以看出 SpringSecurityFilterChain 是先于 CorsFilter 执行的(重点), 如果是跨域请求浏览器会在正式请求前发出一次预检请求(OPTIONS),判断服务器是否允许跨域。

跨域请求没到达 CorsFilter 过滤器就先被 Spring Security 的过滤器给拦截了,要知道预检 OPTIONS 请求是不带 token 的,所以响应 401 未认证的错误。预检请求失败导致后面的请求响应会被浏览器拦截。

CORS 配置失效解决方案

根据配置失效原理分析,有两个解决方案:

  • 解决方案一: 配置 CorsFilter 优先于 SpringSecurityFilter 执行;

  • 解决方案二: 放行预检 OPTIONS 请求 + 基础 CORS 配置。

解决方案一(推荐)

配置 CorsFilter 优先于 SpringSecurityFilter 执行

Spring Security 过滤器是通过 SecurityFilterAutoConfiguration 的 DelegatingFilterProxyRegistrationBean 注册到 servletContext上下文,其中过滤器的顺序属性 Order 读取的 是 SecurityProperties 的默认配置也就是 -100;

SpringBoot 可以通过 FilterRegistrationBean 来对 Filter 自定义注册(排序), 设置 Order 小于 SpringSecurity 的 -100 即可。完整配置如下:

/**
 * CORS资源共享配置
 *
 * @author haoxr
 * @date 2023/4/17
 */
@Configuration
public class CorsConfig {

    @Bean
    public FilterRegistrationBean filterRegistrationBean() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1.允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2.允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3.允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4.允许凭证
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        CorsFilter corsFilter = new CorsFilter(source);

        FilterRegistrationBean<CorsFilter> filterRegistrationBean=new FilterRegistrationBean<>(corsFilter);
        filterRegistrationBean.setOrder(-101);  // 小于 SpringSecurity Filter的 Order(-100) 即可

        return filterRegistrationBean;
    }
}

可以看到不同源的跨域请求能够成功响应。

解决方案二

放行预检 OPTIONS 请求 + 基础 CORS 配置

SecurityConfig 放行 OPTIONS 预检请求配置 SecurityConfig 配置源码

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http 
            	...
                // 走 Spring Security 过滤器链的放行配置
                .requestMatchers(HttpMethod.OPTIONS,"/**").permitAll() // 放行预检请求
                .anyRequest().authenticated();

        return http.build();
    }

    @Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        // 不走过滤器链的放行配置
        return (web) -> web.ignoring()
                .requestMatchers(HttpMethod.OPTIONS,"/**") // 放行预检请求
         
    }

基础的跨域共享配置

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1.允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2.允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3.允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4.允许凭证
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
    
}

另外有自定义过滤器 (例如:VerifyCodeFilter)通过 response.getWriter().print() 响应给浏览器也是不走后面的 CorsFilter 过滤器,所以需要设置响应头

// ResponseUtils# writeErrMsg
response.setContentType(MediaType.APPLICATION_JSON_VALUE);
response.setHeader("Access-Control-Allow-Origin","*");
response.getWriter().print(JSONUtil.toJsonStr(Result.failed(resultCode)));

前/后端源码

完整项目源码地址如下,如果有相关问题可以通过项目 关于我们 添加交流群。文章来源地址https://www.toymoban.com/news/detail-422209.html

Gitee Github
前端 vue3-element-admin vue3-element-admin
后端 youlai-boot youlai-boot

到了这里,关于SpringBoot 配置CORS处理前后端分离跨域配置无效问题解析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前后端分离常见跨域问题及解决方法

    1、has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. 原因:跨域的 allow_headers 没有设置authorization 解决方法 ,加个Authorization就可以 2、has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value

    2024年02月01日
    浏览(43)
  • 宝塔面板部署前后端分离项目(解决跨域问题)

    1.打包前后端项目 注意的点 前后端的联调要改成前后端线上的地址 然后数据库相关的要改成 线上的数据库 放开自己的防火墙 不要忘记了 宝塔面板和阿里云服务器(腾讯云服务器)都要打开 前端 改自己请求的地址 一定要改 打包 打开packaeg.json之后点build 打包之后会生成一

    2024年02月08日
    浏览(47)
  • Spring Boot学习随笔- 后端实现全局异常处理(HandlerExceptionResolver),前后端解决跨域问题(@CrossOrigin(局部解决)自定义跨域配置类(全局))

    学习视频:【编程不良人】2021年SpringBoot最新最全教程 异常处理作用:用来解决整合系统中任意一个控制器抛出异常时的统一处理入口 传统单体架构下的处理方式 配置全局异常处理类 resolveException :当控制器方法出现异常时,如果该方法没有try...catch,则会进入当前方法 针

    2024年02月04日
    浏览(66)
  • 解决Spring Boot前后端分离开发模式中的跨域问题

    在实际开发中,经常会遇到前端Vue应用与后端Spring Boot API接口存在跨域访问的问题。本篇博客将分享解决Spring Boot前端Vue跨域问题的实战经验,帮助开发者快速解决该问题。 跨域问题是由于浏览器的同源策略引起的。同源策略限制了从一个源加载的文档或脚本如何与来自另一

    2024年02月10日
    浏览(110)
  • 前后端分离,Asp.net core webapi 简单 2 步,轻松配置跨域

    可以说,前后端分离已经成为当今信息系统项目开发的主流软件架构模式,微服务的出现,让前后端分离发展更是迅速,大量优秀的前端框架如 vue.js、react 的出现,也让前后端分离趋势加快。 所谓的前后端分离软件架构模式,就是指将前端和后端的开发完全分离,后端负责

    2024年01月17日
    浏览(44)
  • (九)axios前后端跨域数据交互--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

    在任务六中我们讲过,前后端跨域数据交互,有两种方式可以解决跨域请求,任务六我们使用了CorsConfig类配置跨域。本次任务,我们使用一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中的axios,实现前后端跨域数据交互。通过本次任务,大家能够: (1)掌握axios的使用

    2024年02月15日
    浏览(38)
  • 前后端分离项目跨域问题No ‘Access-Control-Allow-Origin‘解决方案

    一.问题背景 前后端分离项目跨域问题,浏览器控制台报错: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource. 请求方法为OPTIONS,状态值为302或403。 本文解决常见的CORS跨域问题,以及,集成CAS 5.3单点登录内嵌页面时,发送复杂请求产生的跨域问题。 二.解决方案

    2024年02月02日
    浏览(54)
  • 关于nest配置跨域app.enableCors()无效的问题

    在学习构建全栈项目过程中,配置好后台接口localhost:3000以及相应的localhost:3000/tags访问标签页接口成功之后,前端项目运行在localhost:8080下访问这个api遇到跨域问题; 首先是postman访问这个api的有效截图; 说明本地localhost:3000/tags这个api可以访问,那么前端的请求跨域了,配置好

    2023年04月08日
    浏览(41)
  • Springboot +spring security,前后端分离时的security处理方案(一)

    在前后端分离这样的开发模式下,前后端的交互都是通过 JSON 来进行数据传递的,无论登录成功还是失败,都不会有服务端跳转或者客户端跳转之类的操作。 也就是说无论登录成功还是失败,服务端都会返回一段登录成功或失败的 JSON 信息给前端,前端收到JSON之后来决定是

    2024年02月07日
    浏览(37)
  • SpringBoot 如何处理 CORS 跨域?

      Springboot跨域问题,是当前主流web开发人员都绕不开的难题。但我们首先要明确以下几点 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。 之所以会跨域,是因为受到了

    2024年02月15日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包