每次请求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);
    }

}
相关推荐
东风破_17 小时前
TypeScript 高级类型进阶:keyof、Exclude、Record 与类型组合思想
前端·后端·typescript
HwJack2017 小时前
UIAbility 生命周期全链路:从冷启动到热启动的实战笔记
笔记·华为·harmonyos
DS随心转插件17 小时前
Grok生成的html怎么导出——AI导出鸭:大模型结构化输出的“最后一公里”工程化解构
前端·人工智能·ai·html·豆包·deepseek·ai导出鸭
九硕智慧建筑一体化厂家17 小时前
直流智能照明|全场景节能升级!打造安全低碳的智慧建筑光环境
运维·笔记·安全·智慧城市
এ慕ོ冬℘゜17 小时前
使用 jQuery 动态渲染表格与状态切换
前端·javascript·jquery
人间凡尔赛18 小时前
2026 前端必修:4 个让 CSS 脱胎换骨的现代新特性(附实战代码)
前端·css
用户21816970493018 小时前
Flutter (二十) 轮播图
前端
前端snow18 小时前
ai agent - RAG 汇总
前端
智购科技自动售货机厂家19 小时前
2026自动售货机AI视觉识别优化:从YOLOv11n模型量化到RKNN部署的端侧推理工程实践~YH
javascript·人工智能·yolo·机器学习·计算机视觉·目标跟踪·perl
计算机魔术师19 小时前
AI为拿高分不惜入侵网站:22个模型作弊审计,真相让人背脊发凉
前端