一、背景:
在做前后端分离时,牵扯到跨域,但是已经设置了跨域
前端设置了允许携带Cookie
axios.defaults.withCredentials = true;
后端也配置了跨域:
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
//项目中的所有接口都支持跨域
registry.addMapping("/**")
//所有地址都可以访问,也可以配置具体地址
.allowedOrigins("*")
//允许的请求方式
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
//是否支持跨域Cookie
.allowCredentials(true)
// 跨域允许时间
.maxAge(3600);
}
}
浏览器端查看发送的请求,请求头中包含 Authorization
但是在后端拦截器中获取的参数总是为 null
二、原因:
实际上发送了两次请求,第一次为 OPTIONS 请求,第二次才 GET/POST… 请求
在OPTIONS请求中,不会携带请求头的参数,所以在拦截器上获取请求头为空,自定义的拦截器拦截成功
第一次请求不能通过,就不能获取第二次的请求了 GET/POST…
第一次请求不带参数,第二次请求才带参数
三、解决:
在拦截器中,如果请求为 OPTIONS 请求,则返回 true,表示可以正常访问,然后就会收到真正的 GET/POST 请求
if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
System.out.println("OPTIONS请求,放行");
return true;
}