• Spring Boot3 系列:Spring Boot3 跨域配置 Cors


    什么是CORS?

    CORS,全称是“跨源资源共享”(Cross-Origin Resource Sharing),是一种Web应用程序的安全机制,用于控制不同源的资源之间的交互。

    在Web应用程序中,CORS定义了一种机制,通过该机制,浏览器能够限制哪些外部网页可以访问来自不同源的资源。源由协议、域名和端口组成。当一个网页请求另一个网页上的资源时,浏览器会检查请求是否符合CORS规范,以确定是否允许该请求。

    CORS的工作原理是:当浏览器发送一个跨域请求时,它会附加一些额外的头部信息到请求中,这些头部信息包含了关于请求的来源和目的的信息。服务器可以检查这些头部信息并决定是否允许该请求。如果服务器允许请求,它会返回一个响应,其中包含一个名为“Access-Control-Allow-Origin”的头部信息,该信息指定了哪些源可以访问该资源。浏览器会检查返回的“Access-Control-Allow-Origin”头部信息,以确定是否允许该跨域请求。

    通过使用CORS,开发人员可以控制哪些外部网页可以访问他们的资源,从而提高应用程序的安全性。

    Spring Boot 如何配置CORS?

    Spring Boot对于跨域请求的支持可以通过两种配置方式来实现:

    1. 注解配置:可以使用@CrossOrigin注解来启用CORS。例如,在需要支持跨域请求的方法上添加@CrossOrigin注解,并配置好origins和maxAge等参数。
    2. 全局配置:可以通过实现WebMvcConfigurer接口并注册一个WebMvcConfigurer bean来配置CORS的全局设置。在实现类中覆盖addCorsMappings方法,通过CorsRegistry对象添加映射规则。默认情况下,所有方法都支持跨域,并且GET、POST和HEAD请求是被允许的。如果需要自定义,可以配置CorsRegistry对象来指定允许的域名、端口和请求方法等。
    3. 过滤器配置:可以通过CorsFilter bean来配置CORS的过滤器。这种方式可以更加灵活地控制CORS的配置,例如只允许特定的域名进行跨域访问等。

    前端代码

    html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Documenttitle>
            <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
        head>
        <body>
            <script>
                $.ajax({
                    url: 'http://localhost:8080/hello',
                    type: 'GET',
                    //xhrFields: { withCredentials: true }, //开启认证
                    success: function (data) {
                        console.log(data)
                    }
                })
            script>
        body>
    html>
    

    注解配置

    @CrossOrigin 是 Spring Framework 中的一个注解,用于处理跨域请求。当一个前端页面尝试从不同的源(域名、端口或协议)请求数据时,浏览器的同源策略会阻止这种请求,以防止潜在的安全问题。然而,在某些情况下,你可能希望允许跨域请求,这时就可以使用 @CrossOrigin 注解。

    添加CorssOrigin注解

    package com.mcode.springbootcorsdemo.controller;
    
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    /**
     * ClassName: HelloController
     * Package: com.mcode.springbootcorsdemo.controller
     * Description:
     *
     * @Author: robin
     * @Version: v1.0
     */
    
    @RestController
    public class HelloController {
    
        @CrossOrigin(value = "http://127.0.0.1:5500",allowedHeaders = "*",allowCredentials = "true")
        @GetMapping("/hello")
        public String hello(){
            return "Hello";
        }
    }
    

    属性:

    @CrossOrigin 注解有几个属性,允许你更精细地控制跨域行为:

    * origins: 允许的源列表,可以是域名、IP 或其他标识符。多个源可以使用逗号分隔。  
    * methods: 允许的 HTTP 方法列表。例如,只允许 GET 请求。  
    * allowedHeaders: 允许的请求头列表。默认情况下,允许所有请求头。  
    * allowCredentials:是否允许配置;值为true、false的字符串
    * maxAge: 预检请求的缓存时间(以秒为单位)。默认是 86400 秒(24小时)。这些属性可以根据需要进行组合和配置。
    
    //
    // Source code recreated from a .class file by IntelliJ IDEA
    // (powered by FernFlower decompiler)
    //
    
    package org.springframework.web.bind.annotation;
    
    import java.lang.annotation.Documented;
    import java.lang.annotation.ElementType;
    import java.lang.annotation.Retention;
    import java.lang.annotation.RetentionPolicy;
    import java.lang.annotation.Target;
    import org.springframework.core.annotation.AliasFor;
    
    @Target({ElementType.TYPE, ElementType.METHOD})
    @Retention(RetentionPolicy.RUNTIME)
    @Documented
    public @interface CrossOrigin {
        @AliasFor("origins")
        String[] value() default {};
    
        @AliasFor("value")
        String[] origins() default {};
    
        String[] originPatterns() default {};
    
        String[] allowedHeaders() default {};
    
        String[] exposedHeaders() default {};
    
        RequestMethod[] methods() default {};
    
        String allowCredentials() default "";
    
        long maxAge() default -1L;
    }
    

    全局配置

    addCorsMappings 是 Spring Boot 中用于配置跨域请求的方法。它允许你指定哪些路径的请求需要进行跨域处理,以及如何处理这些请求。

    addCorsMappings 方法中,你可以使用 addMapping 方法来指定需要跨域处理的请求路径。例如:

    package com.mcode.springbootcorsdemo.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /**
     * ClassName: MyWebMvcConfigurer
     * Package: com.mcode.springbootcorsdemo.config
     * Description:
     *
     * @Author: robin
     * @Version: v1.0
     */
    @Configuration
    public class MyWebMvcConfigurer implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**") // 允许所有请求路径跨域访问
                    .allowCredentials(true) // 是否携带Cookie,默认false
                    .allowedHeaders("*") // 允许的请求头类型
                    .maxAge(3600)  // 预检请求的缓存时间(单位:秒)
                    .allowedMethods("*") // 允许的请求方法类型
                    .allowedOrigins("http://127.0.0.1:5500"); // 允许哪些域名进行跨域访问
        }
    }
    

    过滤器配置

    在Spring Boot中,CorsFilter用于处理跨域请求。它是一个过滤器,用于在Spring应用程序中启用CORS(跨源资源共享)支持。

    package com.mcode.springbootcorsdemo.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.CorsConfigurationSource;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    /**
     * ClassName: CorsConfig
     * Package: com.mcode.springbootcorsdemo.config
     * Description:
     *
     * @Author: robin
     * @Version: v1.0
     */
    @Configuration
    public class CorsConfig {
        @Bean
        public CorsFilter corsFilter(){
            CorsConfiguration config = new CorsConfiguration();
            config.addAllowedHeader("*");
            config.addAllowedMethod("*");
            config.addAllowedOrigin("http://127.0.0.1:5500");
            config.setAllowCredentials(true);
    
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    
            source.registerCorsConfiguration("/**",config);
    
            return  new CorsFilter(source);
        }
    }
    

    注意事项

    当我们没有配置跨域的时候会提示:

    Access to XMLHttpRequest at 'http://localhost:8080/hello' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    

    当我们开启withCredentials:true的时候没有配置allowCredentials为true会提示:

    Access to XMLHttpRequest at 'http://localhost:8080/hello' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
    

    当我们在后端配置了allowCredentials(true)那么就不能配置allowedOrigins("*"),必须指定来源

    jakarta.servlet.ServletException: Request processing failed: java.lang.IllegalArgumentException: 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.
    
  • 相关阅读:
    计算机毕业设计(78)php小程序毕设作品之校园食堂就餐预约小程序系统
    Win10 + VS017 编译SQLite3.12.2源码
    PDF转Word文字可编辑的软件有哪些?
    神经网络介绍详解视频,神经网络介绍详解全书
    【Java分享客栈】我曾经的两个Java老师一个找不到工作了一个被迫转行了
    Vue 3.4.5深度解析:从基础到高级,掌握Composition API与全局API精髓
    npm ERR! path /Users/apple/.npm/_cacache/index-v5/11/77/cf18d9ab54d565b57fb3
    YashanDB混合存储揭秘:行式存储如何为高效TP业务保驾护航(上)
    Machine Learning机器学习学习记录
    C 语言 时间函数使用技巧(汇总)
  • 原文地址:https://www.cnblogs.com/vic-tory/p/17964055