解决SpringBoot中出现的跨域请求问题

素颜马尾好姑娘i 2024-02-05 21:03 11阅读 0赞

> 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.

@Configuration
    public class InterceptorConfig implements WebMvcConfigurer {
        
    
        @Resource
        private LoginInterceptor loginInterceptor;
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
        
            registry.addMapping("/**")
                    .allowedOriginPatterns("*")
                    .allowCredentials(true)
                    .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                    .maxAge(3600);
        }
    
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
        
            registry.
                    // 添加拦截器
                            addInterceptor(loginInterceptor).
                    // 添加拦截路径
                            addPathPatterns("/**").
                    // 白名单
                            excludePathPatterns("/login");
        }
    }
    
    123456789101112131415161718192021222324252627

登录拦截器

@Slf4j
    @Component
    public class LoginInterceptor implements HandlerInterceptor {
        
    
        @Resource
        private RedisTemplate<Object, Object> redisTemplate;
    
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        
            log.info("拦截器===>" + "LoginInterceptor.preHandle");
            // PreFlight请求，忽略本拦截器
            // 浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request）
            // 从而获知服务端是否允许该跨源请求
            // 服务器确认允许之后，才发起实际的 HTTP 请求
            // 如果是预检请求 没有做登录验证直接放行
            // 没有放心 在下面的操作中不能从请求头中取得token
            if (CorsUtils.isPreFlightRequest(request)) {
        
                return true;
            }
            //...登录验证的操作
        }
    }
    
    123456789101112131415161718192021222324

在跨域请求中, 会有一次预检请求.

> 跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

如, 再一次登录的过程中,  
首先会发送一次 **OPTIONS** 请求, 请求头如下:

OPTIONS /manager/login HTTP/1.1
    Host: 192.168.161.31:8083
    Connection: keep-alive
    Accept: */*
    Access-Control-Request-Method: POST
    Access-Control-Request-Headers: content-type
    Origin: http://192.168.161.31:8080
    Sec-Fetch-Mode: cors
    Referer: http://192.168.161.31:8080/
    Accept-Encoding: gzip, deflate
    Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
    1234567891011

服务端支持CROS之后, 给出的部分响应头如下

Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: content-type
    Access-Control-Allow-Methods: GET,HEAD,POST,PUT,DELETE,OPTIONS
    Access-Control-Allow-Origin: http://192.168.161.31:8080
    Access-Control-Max-Age: 3600
    Allow: GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH
    Connection: keep-alive
    Content-Length: 0
    Date: Thu, 14 Jan 2021 12:04:29 GMT
    Keep-Alive: timeout=60
    Vary: Origin
    Vary: Access-Control-Request-Method
    Vary: Access-Control-Request-Headers
    12345678910111213

注意响应头中有一个 Access-Control-Allow-Origin 字段, 用来记录可以访问该资源的域, 当浏览器收到这样的响应头信息之后, 就会提取该字段的值, 发现该字段的值包含当前页面所在的域, 就知道这次的跨域是可以被允许的, 因此就不在对前端的跨域请求进行限制.  
在跨域的整个过程中, 不需要对前端的代码进行修改, 主要是后端进行处理.

欢迎批评指正  
敬礼!

参考资源:  
[SpringBoot升级2.4.0所出现的问题：When allowCredentials is true, allowedOrigins cannot contain the specia][SpringBoot_2.4.0_When allowCredentials is true_ allowedOrigins cannot contain the specia]  
[CORS详解][CORS]  
[SpringBoot + Vue全栈开发实战][SpringBoot _ Vue]

[header]: https://so.csdn.net/so/search?q=header&spm=1001.2101.3001.7020
[SpringBoot_2.4.0_When allowCredentials is true_ allowedOrigins cannot contain the specia]: https://blog.csdn.net/jxysgzs/article/details/110818712
[CORS]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
[SpringBoot _ Vue]: https://book.douban.com/subject/30747218/