springsecurity+vue解决跨域以及session问题

原创已于 2023-04-23 11:20:17 修改 · 1.5k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #java #spring boot

于 2023-03-18 14:37:42 首次发布

springsecurity 专栏收录该内容

7 篇文章

订阅专栏

在前后端分离项目中，使用vue3前端与java后端的springsecurity进行交互时遇到了跨域和登录后无法访问其他接口的问题。跨域问题通过配置SpringSecurity的CORS解决，允许特定来源并启用携带凭证。而SessionID丢失的问题则是因为axios默认不携带cookie，设置`withCredentials`为true来解决。此外，确保SpringSecurity的跨域配置中指定正确的允许来源。

背景

最近在写一个前后端分离项目，后端我采用的是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/"));

这个跨域配置允许跨域访问的站点一定要具体！！！！！（本人已踩坑）