前后端分离之session问题
背景目前正在开发的项目是前后端分离的项目,前端是react,后端springboot开发的微服务,在调试登录的时候发现,登录成功后把所需的信息都放到session中并存到redis里,但当用户从session中取信息的时候发现始终取不到,每次跨域请求时ajax发送的都是新的sessionid,导致无法获取信息。解决思路通过度娘查询发现必须在前后端配置一些东西,后端需在登录拦截器里增加一些响应头信息
·
背景
目前正在开发的项目是前后端分离的项目,前端是react,后端springboot开发的微服务,在调试登录的时候发现,登录成功后把所需的信息都放到session中并存到redis里,但当用户从session中取信息的时候发现始终取不到,每次跨域请求时ajax发送的都是新的sessionid,导致无法获取信息。
解决思路
通过度娘查询发现必须在前后端配置一些东西,后端需在登录拦截器里增加一些响应头信息,前端需要在Ajax请求时增加一些参数。下面是具体的实现过程。
解决过程
登录拦截器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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", "*"); 这里不能写成("*")号
配置类
1 2 3 4 5 6 7 8 | public class LoginConfig extends WebMvcConfigurerAdapter { public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LogInterceptor()).addPathPatterns("/login"); super.addInterceptors(registry); } } |
这里拦截登录请求
修改前端请求
因为前端react使用的是axios,查看axios的文档发现默认配置里 withCredentials: false,withCredentials默认是false,意思就是不携带cookie信息,我们需要改成 true。
修改前端登录请求的js:
1 2 | import axios from 'axios'; axios.defaults.withCredentials=true; |
大功告成
继续测试发现登录成功后,响应头里有sessionid,并且接下来前端发送请求的时候携带的是同一个sessionid。
更多推荐
已为社区贡献8条内容
所有评论(0)