tft每日頭條

 > 圖文

 > 前端和後端的session

前端和後端的session

圖文 更新时间:2025-02-11 06:23:20

前端和後端的session?背景 目前正在開發的項目是前後端分離的項目,前端是vue,後端springboot開發的微服務,在調試登錄的時候發現,登錄成功後把所需的信息都放到session中并存到redis裡,但當用戶從session中取信息的時候發現始終取不到,每次跨域請求時ajax發送的都是新的sessionid,導緻無法獲取信息,今天小編就來聊一聊關于前端和後端的session?接下來我們就一起去研究一下吧!

前端和後端的session(前後端分離session問題)1

前端和後端的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。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved