背景
最近在写一个前后端分离项目,后端我采用的是java作为服务端,前端我用vue3进行的开发,
主要是想写一套后台管理系统,后端采用springsecurity进行权限控制访问
问题
后端我当时是用postman进行测试开发的,再此并无任何问题。但是,当我把vue3前端的内容写的差不多进行前后端交互时,问题产生了!!!!
首先,就是跨域问题,用axios向后端发送请求时一直显示跨域!!!!经过不懈努力,解决的跨域的问题,但是又出现了一个更让人摸不着头脑的问题,那就是登录之后,用axios向后端再访问其他请求时,一直显示用户未登录!!!!!!
分析
首先,跨域问题,这个遇到的次数不少,让我想到了同源策略,我回头扒拉了一下以前SpringMVC的笔记,有查阅的大量资料,解决了这个问题。其次,这个vue请求默认不带cookie这个问题困扰了我很久,在偶然的一次机会,突然开窍,把它解决了。
经过一段时间的痛苦折磨,我终于解决了这俩问题,下面就具体分析一下,然后说一下我的解决方案
跨域
跨域介绍
在说跨域之前先说一下同源策略,同源指的是两个URL的协议、域名、端口相同,浏览器出于安全方面的考虑,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源
跨域分为以下三种情况
http://127.0.0.1:8080 --> https://127.0.0.1:8080 协议跨域
http://127.0.0.1:8080 --> http://127.0.0.2:8080 IP跨域
http://127.0.0.1:8080 --> http://127.0.0.1:8081 端口跨域
服务端解决跨域
首先是springsecurity,在配置类中进行以下配置:
/*** Security配置类*/@Configuration@EnableGlobalMethodSecurity(prePostEnabled = true)// 开启鉴权配置注解public class SecurityConfig extends WebSecurityConfigurerAdapter {//解决跨域CorsConfigurationSource configurationSource() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.setAllowedHeaders(Collections.singletonList("*"));//允许跨域访问的请求方式Arrays.asList("GET","POST")corsConfiguration.setAllowedMethods(Collections.singletonList("*"));//允许跨域访问的站点Arrays.asList("http://127.0.0.1:5173/")Collections.singletonList("*")corsConfiguration.setAllowedOrigins(Arrays.asList("http://127.0.0.1:5173/"));// 允许携带凭证corsConfiguration.setAllowCredentials(true);corsConfiguration.setMaxAge(3600L);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();//对所有URL生效source.registerCorsConfiguration("/**", corsConfiguration);return source;}@Overrideprotected void configure(HttpSecurity http) throws Exception {// 自定义表单登录http.formLogin().usernameParameter("username") // 用户名项.passwordParameter("password") // 密码项.loginProcessingUrl("/admin/login") // 登录提交路径.successHandler(new MyLoginSuccessHandler()) // 登录成功处理器.failureHandler(new MyLoginFailureHandler()) // 登录失败处理器// 跨域配置.and().cors().configurationSource(configurationSource());// 权限拦截配置http.authorizeRequests()//.antMatchers("/login").permitAll() // 登录页不需要认证.antMatchers("/admin/login").permitAll() // 登录请求不需要认证//.antMatchers("/admin/*").permitAll().anyRequest().authenticated(); // 其余请求都需要认证// 退出登录配置http.logout().logoutUrl("/admin/logout") // 注销的路径.logoutSuccessHandler(new MyLogoutSuccessHandler()) // 登出成功处理器.clearAuthentication(true) // 清除认证数据.invalidateHttpSession(true); // 清除session// 异常处理http.exceptionHandling().authenticationEntryPoint(new MyAuthenticationEntryPoint()) // 未登录处理器.accessDeniedHandler(new MyAccessDeniedHandler()); // 权限不足处理器// 关闭csrf防护,取消跨站请求伪造防护http.csrf().disable();// 开启跨域访问http.cors();}@Beanpublic PasswordEncoder passwordEncoder(){return new BCryptPasswordEncoder();}}
其次是控制器解决跨域
在类上加上此注解即可
@CrossOrigin
session ID
session介绍
session是一种用来解决http协议无状态的重要技术。具体是如何解决无状态的呢?
首先,当浏览器访问服务端且使用的session时,servlet容器(Tomcat)会为其创建一个Session对象,并为其生存一个session id(JSESSIONID),并通过写cookie的方式将sesssion id写入到浏览器的cookie中,然后,浏览器将自动保存session ID ,最后,当浏览器再次发起其他请求时,将会自动的携带该session ID
session的使用是和cookie紧密关联的
cookie存储在客户端(浏览器负责记忆),session存储在服务端(在Java中是web容器对象,服务端负责记忆)
每个session对象有一个sessionID,这个ID值还是用cookie方式存储在浏览器,浏览器发送cookie,服务端web容器根据cookie中的sessionID得到对应的session对象,这样就能得到各个浏览器的“会话”信息
vue的axios请求发送时是默认不保存cookie的
解决Session ID未保存的问题
vue的axios配置
const instance = axios.create({baseURL: "http://localhost:8001",//公共配置urltimeout: 5000,//配置5s超时withCredentials: true//访问允许携带cookie})
另外springsecurity中有个配置一定要注意
corsConfiguration.setAllowedOrigins(Arrays.asList("http://127.0.0.1:5173/"));
这个跨域配置允许跨域访问的站点一定要具体!!!!!(本人已踩坑)
如果觉得《springsecurity+vue解决跨域以及session问题》对你有帮助,请点赞、收藏,并留下你的观点哦!