背景
最近在写一个前后端分离项目，后端我采用的是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问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
