背景
最近在写一个前后端分离项目，后端我采用的是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; } @Override protected 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(); } @Bean public 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",//公共配置url timeout: 5000,//配置5s超时 withCredentials: true//访问允许携带cookie })
另外springsecurity中有个配置一定要注意
corsConfiguration.setAllowedOrigins(Arrays.asList("http://127.0.0.1:5173/"));
这个跨域配置允许跨域访问的站点一定要具体！！！！！（本人已踩坑）
