springboot+vue前后端分离多次请求sessionid不同的解决方法

        背景:我的项目中有一个发送邮箱验证码和检验的功能,通过redis,以sessionid为键,随机验证码为值,但是我发现获取验证码和点击注册时检验验证码的sessionid总是不同,在页面检查中选择网络发现set-cookie后面有一个黄标显示:“Set-Cookie没有指定“SameSite”属性,它被默认为“SameSite=Lax”,并被阻止,因为它来自一个cross-site响应,而不是对top-level导航的响应。Set-Cookie必须设置为“SameSite=None”才能启用cross-site用法”。问题原因是前后端跨域。

        过程:在网上寻找解决方法的过程中我发现了一下几种方法:

1.在vue中添加

axios.defaults.withCredentials = true

 没有解决问题

2.在springboot中添加

 private CorsConfigurationSource configuration(){
        CorsConfiguration configuration=new CorsConfiguration();
        //允许所有的请求,只能用于测试,非常危险
        configuration.addAllowedOriginPattern("*");
        configuration.addAllowedHeader("*");
        configuration.addAllowedMethod("POST");
        configuration.addAllowedMethod("GET");
        //允许携带cookie
        configuration.setAllowCredentials(true);
        configuration.setMaxAge(3600L);

        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",configuration);
        return source;
    }

依然没有解决问题

3.通过chrome://flags/更改浏览器设置,后来发现新版本chrome没有给出相关设置, 也没有成功

4.关闭csrf,依然没有解决问题

5.使用Web相关配置

@Configuration
public class WebConfig implements WebMvcConfigurer {
    //解决前后端分离跨域问题,并没有解决
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//设置允许跨域的路径
                .allowedOrigins("http://127.0.0.1:8080")//设置允许跨域请求的域名
                .allowCredentials(true)//是否允许证书 不再默认开启
                .allowedMethods("GET", "POST", "PUT", "DELETE")//设置允许的方法
                .maxAge(3600);//跨域允许时间
    }

}

依然没有解决问题

最后:我询问chatgpt:“怎么在spring security中设则Samesite = None Secure->”,再根据自身代码不断追问终于得到了答案

application.yml文件中配置:

server:
  servlet:
    session:
      cookie:
        http-only: true
        secure: true
        same-site: none

最终解决了问题

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Spring Boot和Vue前后分离的项目中,当前Vue通过ajax或axios请求的API时,会经常遇到跨域问题。 跨域是由于同源策略(Same Origin Policy)导致的,即浏览器限制了在不同源之间进行通信(不同源指协议、域名、口号任意一个不同)。解决跨域问题的方法有很多,这里介绍一种常见的处理方式。 在Spring Boot后配置中,我们可以通过添加一个跨域配置类来实现对请求跨域的处理。首先创建一个类,命名为CorsConfig(跨域配置类名可自定义),并在该类上加上@Configuration注解。然后在类中添加一个方法addCorsMappings,使用@CrossOrigin注解配置允许跨域的规则。例如可以设置允许所有来源(origin)、所有方法(methods)和所有请求头部(allowedHeaders),如下所示: @Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*"); } }; } } 这样就实现了对所有请求的跨域访问授权。在allowedOrigins方法中可配置指定的允许来源,如指定某个特定的域名;allowedMethods方法可配置允许的请求方法,如GET、POST等;allowedHeaders方法可配置允许携带的请求头信息。 在Vue项目中,可以在开发环境中通过配置代理实现请求转发来解决跨域问题。在vue.config.js(Vue的配置文件)中,添加以下代码: module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 后API地址 ws: true, changeOrigin: true } } } } 以上代码表示将以/api开头的请求转发到http://localhost:8080地址,并开启WebSocket和改变请求的源地址。这样前项目就可以通过/api访问后API,而不用担心跨域问题。 这样,我们就能够很方便地解决Spring Boot和Vue前后分离项目中的请求API跨域问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值