前後端分離之session問題
阿新 • • 發佈:2019-02-03
背景
目前正在開發的專案是前後端分離的專案,前端是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 { |
注意: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。