springboot2.x Spring Security Vue-resource跨域问题解决

待我称王封你为后i 2023-07-04 04:52 29阅读 0赞

原因：最近在将一个项目修改为前后端分离中，前端使用Vue 开发碰到跨域问题，这里记录一下。

#### 服务器端修改 ####

1、在配置类中设置 CorsFilter，新建CorsConfig

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;
    
    @Configuration
    public class CorsConfig{ 
    
    	@Bean
    	public CorsFilter corsFilter() { 
    		final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    		final CorsConfiguration config = new CorsConfiguration();
    		// 允许cookies跨域
    		config.setAllowCredentials(true);
    		// 允许向该服务器提交请求的URI，*表示全部允许。。这里尽量限制来源域，比如http://xxxx:8080
    		// ,以降低安全风险。。
    		config.addAllowedOrigin("*");
    		// 允许访问的头信息,*表示全部
    		config.addAllowedHeader("*");
    		// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
    		config.setMaxAge(18000L);
    		// 允许提交请求的方法，*表示全部允许，也可以单独设置GET、PUT等
    		config.addAllowedMethod("*");
    
    		/* * config.addAllowedMethod("HEAD"); config.addAllowedMethod("GET");// * 允许Get的请求方法 config.addAllowedMethod("PUT"); * config.addAllowedMethod("POST"); config.addAllowedMethod("DELETE"); * config.addAllowedMethod("PATCH"); */
    		source.registerCorsConfiguration("/**", config);
    		return new CorsFilter(source);
    	}
        
    }

2、修改 Spring Security配置，加上cors()来开启跨域以及requestMatchers(CorsUtils::isPreFlightRequest).permitAll()来处理跨域请求中的preflight请求。

//开启跨域 cors()
    	http.cors().
            and().csrf().disable().
            authorizeRequests().
            //处理跨域请求中的Preflight请求
            requestMatchers(CorsUtils::isPreFlightRequest).permitAll()

注：前两步服务器端就已经开启跨域访问了，但是在实际测试中发现，前端访问session一直会发生变化，翻了大量文章后发现spring-session 2.x 中 Cookie里面居然引入了SameSite，他默认值是 Lax。  
　　SameSite Cookie 是用来防止CSRF攻击，它有两个值：Strict、Lax  
SameSite = Strict：  
　　意为严格模式，表明这个cookie在任何情况下都不可能作为第三方cookie；  
SameSite = Lax：  
　　意为宽松模式，在get请求是可以作为第三方cookie，但是不能携带cookie进行跨域post访问（这就很蛋疼了，我们那个校验接口就是POST请求）；  
总结：  
  前端请求到后台，每次session都不一样，每次都是新的会话，导致获取不到用户信息，添加配置取消仅限同一站点设置。

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.session.web.http.CookieSerializer;
    import org.springframework.session.web.http.DefaultCookieSerializer;
    
    @Configuration
    public class SpringSessionConfig { 
    
    	@Bean
        public CookieSerializer httpSessionIdResolver() { 
            DefaultCookieSerializer cookieSerializer = new DefaultCookieSerializer();
            // 取消仅限同一站点设置
            cookieSerializer.setSameSite(null);
            return cookieSerializer;
        }
    }

#### 前端修改 ####

Vue在公共js中添加统一配置

使用Vue.resource发送请求时配置如下：
    Vue.http.options.xhr = {  withCredentials: true };
    Vue.http.interceptors.push((request, next) => { 
    	request.credentials = true
    	next()
    })

其他工具配置，可以参考如下配置，未测试；

使用Vue.axios发送请求时配置如下：
    axios.defaults.withCredentials = true；
    
    jquery请求带上  xhrFields: { withCredentials: true}, crossDomain: true；
    $.ajax({ 
        type: "post",
        url: "",
        xhrFields: { withCredentials: true},
        crossDomain: true,
        data: { username:$("#username").val()},
        dataType: "json",
        success: function(data){  }
    });

参考：  
[https://www.cnblogs.com/zimublog/p/10786110.html][https_www.cnblogs.com_zimublog_p_10786110.html]  
[https://blog.csdn.net/qq\_17555933/article/details/92017890][https_blog.csdn.net_qq_17555933_article_details_92017890]  
[https://www.cnblogs.com/yuarvin/p/10923280.html][https_www.cnblogs.com_yuarvin_p_10923280.html]

[https_www.cnblogs.com_zimublog_p_10786110.html]: https://www.cnblogs.com/zimublog/p/10786110.html
[https_blog.csdn.net_qq_17555933_article_details_92017890]: https://blog.csdn.net/qq_17555933/article/details/92017890
[https_www.cnblogs.com_yuarvin_p_10923280.html]: https://www.cnblogs.com/yuarvin/p/10923280.html