每次请求sessionid变化【SpringBoot+Vue】

引言:花了一晚上的时间,终于把问题解决了,一开始后端做完后,用apifox所有接口测试都是可以的,但当前端跑起来后发现接收不到后端的数据。

当我写完前后端,主页面和获取当前页面信息接口后,配置了cros注解

复制代码
@CrossOrigin

我一开始使用接口文档做了后端接口测试,测试发现当访问主页面时前端能成功接受到数据,本以为皆大欢喜了,在当我接入获取当前信息接口时并测试时发现获取不到信息,我又使用apifox进行测试接口能够获取到数据,于是我使用F12进行调试。

登录:

获取当前信息:

浏览器第一次访问时会获得sessionid存在cookie中,后续访问如果有session存着,获取当前信息时会直接用,但是并没有,由上面可以知道后端重新返回了一个sessionId给前端,导致访问后端时由于sessionId不匹配,最终无法获取到登录账号的当前用户信息。

然后又经过多次调试,最终解决了这个问题,下面把方案放上来:

首先是前端,在vue的main.js中加上这个

复制代码
axios.defaults.withCredentials = true;

在后端用配置类解决跨域问题

另一方面是corsfilter,这个会先于拦截器执行,解决跨域问题

复制代码
package com.wcw.usercenter.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
    private CorsConfiguration corsConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); //允许所有请求头
        corsConfiguration.addAllowedMethod("*"); //允许所有请求方法
        corsConfiguration.setAllowCredentials(true);//是否允许证书
        corsConfiguration.addAllowedOrigin("http://localhost:5173/"); //允许所有的请求类型
        corsConfiguration.setMaxAge(3600L);
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter(){
        //存储request与跨域配置信息的容器,基于url的映射
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfig());
        return new CorsFilter(source);
    }

}
相关推荐
TL滕8 分钟前
从0开始学算法——第六天(进阶排序算法)
笔记·学习·算法·排序算法
韩立学长9 分钟前
【开题答辩实录分享】以《基于Vue Node.js的露营场地管理系统的设计与实现》为例进行选题答辩实录分享
数据库·vue.js·node.js
TL滕11 分钟前
从0开始学算法——第六天(进阶排序算法练习)
笔记·python·学习·算法·排序算法
q_191328469514 分钟前
基于SpringBoot2+Vue2+uniapp的考研社区论坛网站及小程序
java·vue.js·spring boot·后端·小程序·uni-app·毕业设计
一壶纱23 分钟前
uni-app 使用 uview-plus
前端
敲敲了个代码25 分钟前
从零实现一个「就地编辑」组件:深入理解 OOP 封装与复用的艺术
前端·javascript·学习·面试·前端框架
xiechao26 分钟前
函数组件 useEffect 清理函数抛错:ErrorBoundary 能捕获吗?
前端·react.js
YJlio26 分钟前
Autologon 学习笔记(9.16):无感登录的正确打开方式(原理、风险与替代方案)
数据库·笔记·学习
憨逗君27 分钟前
vite学习
vue.js
♛小小小让让28 分钟前
FourCC、编解码器、 文件后缀、视频容器的关系
笔记·音视频