当前位置:首页 > 技术文章 > 正文内容

前后端分离session问题(前后端分离session失效)


背景 目前正在开发的项目是前后端分离的项目,前端是vue,后端springboot开发的微服务,在调试登录的时候发现,登录成功后把所需的信息都放到session中并存到redis里,但当用户从session中取信息的时候发现始终取不到,每次跨域请求时ajax发送的都是新的sessionid,导致无法获取信息。

解决思路 通过度娘查询发现必须在前后端配置一些东西,后端需在登录拦截器里增加一些响应头信息,前端需要在Ajax请求时增加一些参数。下面是具体的实现过程。

解决过程 登录拦截器

public class LogInterceptor implements HandlerInterceptor {
	@Override
public boolean preHandle(HttpServletRequest request,
		HttpServletResponse response, Object object) throws Exception {
	response.setCharacterEncoding("UTF-8");
	response.setContentType("application/json; charset=utf-8");
	response.setHeader("Access-Control-Allow-Credentials","true");
	response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
	response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
	response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
	
	return true;
	}

}
注意:response.setHeader("Access-Control-Allow-Credentials","true"); 这是重点
response.setHeader("Access-Control-Allow-Origin", "*"); 这里不能写成("*")号

配置类

这里拦截登录请求

@Configuration
public class LoginConfig extends WebMvcConfigurerAdapter {
   @Override
   public void addInterceptors(InterceptorRegistry registry) {
       registry.addInterceptor(new LogInterceptor()).addPathPatterns("/login");
       super.addInterceptors(registry);
   }
}

这里拦截登录请求

修改前端请求 因为前端vue使用的是axios,查看axios的文档发现默认配置里 withCredentials: false,withCredentials默认是false,意思就是不携带cookie信息,我们需要改成 true。 修改前端登录请求的js:

import axios from 'axios';
axios.defaults.withCredentials=true;

大功告成 继续测试发现登录成功后,响应头里有sessionid,并且接下来前端发送请求的时候携带的是同一个sessionid。

相关文章

垃圾收费管理系统(垃圾收运管理系统)

今天来了解《#垃圾收费管理系统》,它包括如下功能:收费单位表格界面,类别表格界面,类别设置信息窗口,单位信息表格界面,单位信息信息窗口,缴费登记信息窗口,缴费登记表格界面,缴费登记的缴费单.1,到期提...

费用报销单填写及粘贴全攻略:避免常见错误!附费用报销管理系统

费用报销单是企业日常财务管理中的重要工具,用于记录和核销员工在工作中产生的各类费用。填写准确的费用报销单不仅能够保证财务报销流程的顺利进行,还能提高工作效率,确保公司资金的合理使用。在填写报销单时,员...

Vue父子组件参数传递方法(vue父子组件传参方式)

在 Vue 中,父子组件之间的参数传递是常见的需求,主要通过 Props 和 自定义事件 实现。以下是详细说明和代码示例:一、父组件向子组件传递参数(Props)父组件通过 属性 向子组件传递数据,子...

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

作者:xuying 全栈修炼转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ前言Vue3.0 发 beta 版都有一段时间了,正式版也不远了...

Vue状态管理:Pinia完整指南(状态管理vuex)

概述本文专注于Vue的状态管理。我们将深入探讨如何使用Pinia来管理Vue应用程序的状态。状态管理使用props和emit进行父子组件间的数据协作虽然方便,但在以下情况下可能不够充分,数据传递往往会...

Vue基础(vue基础组件文件名符合规范的是)

Vue 是什么,它的核心特点有哪些?Vue 是一款渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助开发者用...