前后端分离之session问题

阳光穿透心脏的1/2处 2022-05-22 02:26 697阅读 0赞

## 背景 ##

目前正在开发的项目是前后端分离的项目，前端是react,后端springboot开发的微服务，在调试登录的时候发现，登录成功后把所需的信息都放到session中并存到redis里，但当用户从session中取信息的时候发现始终取不到，每次跨域请求时ajax发送的都是新的sessionid，导致无法获取信息。

## 解决思路 ##

通过度娘查询发现必须在前后端配置一些东西，后端需在登录拦截器里增加一些响应头信息，前端需要在Ajax请求时增加一些参数。下面是具体的实现过程。

## 解决过程 ##

### 登录拦截器 ###

<table> 
 <tbody> 
 <tr> 
 <td><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td> 
 <td style="width:647.4px;"><pre style="width:647.4px;">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;
	}
}
</pre></td> 
 </tr> 
 </tbody> 
</table>

注意：response.setHeader("Access-Control-Allow-Credentials","true"); 这是重点
    response.setHeader("Access-Control-Allow-Origin", "*"); 这里不能写成("*")号

### 配置类 ###

<table> 
 <tbody> 
 <tr> 
 <td><pre>1
2
3
4
5
6
7
8
</pre></td> 
 <td style="width:654.55px;"><pre style="width:654.55px;">@Configuration
public class LoginConfig extends WebMvcConfigurerAdapter {
 
 @Override
 public void addInterceptors(InterceptorRegistry registry) {
 
 registry.addInterceptor(new LogInterceptor()).addPathPatterns("/login");
 super.addInterceptors(registry);
 }
}
</pre></td> 
 </tr> 
 </tbody> 
</table>

**这里拦截登录请求**

### 修改前端请求 ###

因为前端react使用的是axios，查看axios的文档发现默认配置里 *withCredentials: false*，withCredentials默认是false，意思就是不携带cookie信息,我们需要改成 true。  
修改前端登录请求的js:

<table> 
 <tbody> 
 <tr> 
 <td><pre>1
2
</pre></td> 
 <td style="width:654.55px;"><pre style="width:654.55px;">import axios from 'axios';
axios.defaults.withCredentials=true;
</pre></td> 
 </tr> 
 </tbody> 
</table>

### 大功告成 ###

继续测试发现登录成功后，响应头里有sessionid，并且接下来前端发送请求的时候携带的是同一个sessionid。