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

前后端分离session问题

ruisui881周前 (04-22)技术分析12


背景 目前正在开发的项目是前后端分离的项目,前端是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。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3516.html

标签: vue跨域
分享给朋友:

“前后端分离session问题” 的相关文章

Vue组件通信之props深入详解!

props 是 Vue 组件中一个很重要的概念。它是用来从父组件向子组件传递数据的。为什么需要props?这是因为在Vue中,组件是相互隔离的。每个组件都有自己的作用域,子组件无法直接访问父组件的状态或值。通过props,父组件可以将数据传递给子组件。使用props的步骤:1. 在子组件中定义pro...

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时,任何类型的游戏都需要Flash。但随着 HTML5 发展,HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏,它们可以在所有现代浏览器中运行,并且只使用web技术构建。1. HexGL地址:http://...

Solid State Logic 发布低保真数字失真插件 Digicrush

Solid State Logic 宣布推出低保真数字失真插件 Digicrush ,他们最新的创意工具具有经典数字失真的粗糙、低保真特性,完美模拟早期数字音频的衰减和伪影。Digicrush 充满怀旧气息,深受经典数字采样器和效果器的影响,具有内置抖动、可调比特深度和采样率降低功能,是为音轨添加复...

VUE 技术栈

官网链接:https://cn.vuejs.org/什么是vue:渐进式JavaScript 框架vue-cli链接:https://cli.vuejs.org/vue-cli安装:npm install -g @vue/clivue -V创建一个项目:vue create xxxxxx模版语法:文...

vue.js 双向绑定如何理解,有什么好处!#云南小程序开发

Vue.js 的双向数据绑定是借助于 JavaScript 的一些特性,如对象的属性 getter 和 setter 以及 Vue 的依赖追踪系统实现的。简单来说,双向数据绑定就是数据与视图间的双向通信,也就是说数据的改变会马上反映到视图中,视图的改变也会立刻改变数据。具体来说,当你改变了数据时,视...

如何解决iframe跨域问题?这些解决方案可以有效满足你的业务场景

今天我们聊一下前端中非常基础的一个知识点——iframe跨域。作为一名前端,在业务中你可能会遇到这样一个场景:自己开发的页面中需要通过iframe嵌入别人的页面,比如passport页面(登录),但是常常因为跨域问题,导致父子页面无法通信,这时我们就要想办法如何在跨域的情况下解决这个问题。什么是跨域...