1. 程式人生 > >前後端分離之session問題

前後端分離之session問題

背景

目前正在開發的專案是前後端分離的專案,前端是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
@Configuration
public class LoginConfig extends WebMvcConfigurerAdapter {
   @Override
   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。