记录生活中的点点滴滴

0%

cookie前后端传输失败解决方法

前后端分离下,cookie传输失败的解决方法!

之前的前端ajax请求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
url: "http://localhost:8080/login/do_login",
type: "POST",
data:{
mobile:$("#mobile").val(),
password: password
},
success:function(data){
xxx
},
error:function(){
xxx
}
});

后端设置:

1
2
3
4
5
6
7
8
9
@RequestMapping("/do_login")
@ResponseBody
@CrossOrigin
public Result<String> doLogin(HttpServletResponse response, @Valid LoginVO loginVO) {
log.info(loginVO.toString());
//登录
String token = miaoshaUserService.login(response, loginVO);
return Result.success(token);
}

因为我们已经加了 @CrossOrigin 注解,所以这个ajax请求可以跨域成功,但是有一个问题就是浏览器无法存取token,我们在后端已经设置了token的设置,查了一些资料,找到了解决方法。

就是在注解里配置一个东西:

1
@CrossOrigin(originPatterns = "*",allowCredentials = "true")

然后在ajax请求里面添加一些配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
url: "http://localhost:8080/login/do_login",
type: "POST",
xhrFields:{
withCredentials: true
},
crossDomain: true,
data:{
mobile:$("#mobile").val(),
password: password
},
success:function(data){
xxx
},
error:function(){
xxx
}
});

这样就解决了!

为什么会出现前后端传输cookie失效的问题呢?

其实关键就是我们前端和后端都需要去配置ajax请求可以携带cookie的请求。如果服务器没有设置会出现跨域失败问题,如果客户端没有设置的话,默认就不会携带cookie,那么也会影响我们的登录态!

当然,我们也可以配置一个我们全局的处理跨域的拦截器,如下:

1
2
3
4
5
6
7
8
9
10
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("POST", "GET")
.allowCredentials(true);//设置成允许操作cookie
}
}

那么 WebMvcConfigurer 是什么呢?

1
WebMvcConfigurer是一个接口,提供很多自定义的拦截器,例如跨域设置、类型转化器等等。可以说此接口为开发者提前想到了很多拦截层面的需求,方便开发者自由选择使用。由于Spring5.0废弃了WebMvcConfigurerAdapter,所以WebMvcConfigurer继承了WebMvcConfigurerAdapter大部分内容。

我的秒杀项目就是用它做了跨域设置、添加User的方法视图解析器,还有增加拦截器配合自定义 AccessLimit 注解实现方法的限流!

下面我们看看CORS的配置相关原理,registry.addMapping("/**") 会返回一个 CorsRegistration 对象, 它的详细信息可以参考官网 https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/servlet/config/annotation/CorsRegistration.html

下面看看我们的一些配置:

allowedOriginPatterns 它替代了 allowedOrigin ,支持更灵活的模式,用于指定允许来自浏览器的跨源请求的来源。

allowedMethods 将 HTTP 方法设置为允许。

allowCredentials 指浏览器是否应将凭据(例如 cookie 以及跨域请求)发送到带注释的端点。

最后如果我们要把项目部署在服务器上的时候记得修改一下设置Cookie的Domain域,比如我的服务器是 192.168.138.137 如下: