Spring Boot 预检[OPTIONS]请求跨CORS域问题解决方案

教程分享 > Java教程 > Spring (647) 2024-10-17 19:10:17

场景简述

在使用 SpringBoot + Vue 进行前后端分离的开发过程中,部分功能是需要当用户登陆成功时后端(SpringBoot)向前端(Vue)返回一个token值,前端将这个token值放在以后每个请求的请求头中,后端先从拦截器中验证token值的存在,再放行请求,以确保不会被别人恶意修改、删除数据,结果出现了CORS跨域导致请求失败的情况。

上述场景出现的浏览器报错:

Access to XMLHttpRequest at ‘http://xxxxxxxx’ from origin ‘http://xxxxxxxx’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

一、排错过程:

1、猜测一:既然是CORS报错,首先就是检查跨域配置是否有问题

 以下是对后端进行的跨域配置:


 @Configuration
public class WebMvcConfig implements WebMvcConfigurer {
   /**
    * 解决因前后端的端口不一致导致的跨域问题
    */
   @Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
               .allowedOrigins("*")
               .allowedMethods("GET","POST","PUT","OPTIONS","DELETE","PATCH")
               .allowCredentials(true)
               .maxAge(3600);
   }
}

经过接口访问测试后,发现问题是出在后端拦截器获取请求头中自定义属性 Authorization 的 token 值时,出现了 null 值,结果被程序判断后进行了拦截,导致了前端没有接受到响应,从而出现的错误,以下为拦截器代码:

/**
* 访问controller之前先进行token验证
*/
@Component
public class TokenInterceptor implements HandlerInterceptor {
   @Autowired
   private StringRedisTemplate stringRedisTemplate;
   @Override
   public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
       String token = request.getHeader("Authorization");// 获取请求头中携带的token值
       // token验证
       if(token!=null) {
           // 登陆时会将token值保存在redis中,在这里向redis中验证token值是否是真实存在的
           String value = stringRedisTemplate.opsForValue().get(token);
           if (value != null) {
               return true;
           }
       }
       // 验证失败,拦截请求
       return false;
   }
2、猜测二:这时就判断前端是否没有将自定义的属性 Authorization 放在请求头中

前端将自定义属性 Authorization 放入请求头的代码如下:

// 发送请求之前先为请求头添加Authorization字段且值为token,以应对后端接口的验证
axios.interceptors.request.use(config => {
   // 将登陆时存储在浏览器sessionStorage中的token值放入请求头中
   config.headers.Authorization = window.sessionStorage.getItem("token");
   return config;
})

再检查请求头的信息:

SpringBoot预检请求跨CORS域问题解决方案_图示-eab5c464020b4281835879c183123b8b.png

发现自定义属性 Authorization 确实已经加入了请求头中,只是后端拦截器中没有接收到该属性,但经过测试后端代码(即上述拦截器的代码)没有问题。

最后经过查阅资料,发现问题最终出在了浏览器的预检请求中…
以下解释浏览器的两种请求以及上述问题的解决方案。

 

二、浏览器的两种请求

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

1、简单请求

只要同时满足以下两大条件,就属于简单请求。

(1) 请求方法是以下三种方法之一:HEAD、GET、POST
(2)HTTP的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件,就属于非简单请求。

由于我向请求头中添加了自定义的属性,所以发送请求时就属于非简单请求。

2、预检请求
 非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为 “预检” 请求(preflight)。

 浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。
 

三、最终原因

由于在后端拦截器中拦截了所有的请求,只有检查到请求头中真实存在的token值才会放行请求,这就导致了浏览器发起的预检请求也被拦截了(由于该请求头中没有携带自定义的 Authorization 属性,所以被拦截),最终导致正式的 XMLHttpRequest 请求没有发出去。

解决方案

新建一个CorsFilter,专门处理Cors跨域,不使用addCorsMappings(CorsRegistry registry) 配置

@Slf4j
@Component
public class CorsFilter extends OncePerRequestFilter implements Ordered {
private static final String OPTIONS = "OPTIONS";

@Override
public int getOrder() {
return Ordered.HIGHEST_PRECEDENCE;
}

@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, @Nonnull FilterChain filterChain) throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Credentials", "true");
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,DELETE,PUT");
response.addHeader("Access-Control-Allow-Headers", "*");
response.addHeader("Access-Control-Max-Age", "3600");
log.info("requestURI : {} method : {} ", request.getRequestURI(), request.getMethod());
// 如果是OPTIONS则结束请求
if (OPTIONS.equals(request.getMethod())) {
response.getWriter().println("ok");
return;
}
filterChain.doFilter(request, response);
}
}

注意:cors过滤器的优先级必须最高,否则遇到需要鉴权的接口直接就over了。

 

https://www.leftso.com/article/2409101134347536.html

相关文章
spring boot如何跨域?本文将讲解在spring boot项目中的跨域问题如何解决。
Spring boot 入门之CORS 跨域配置详解,spring 跨域配置详解。
场景在使用 SpringBoot + Vue 进行前后端分离的开发过程中,部分功能是需要当用户登陆成功时后端(SpringBoot)向前端(Vue)返回一个to
在 Spring 框架中,我们可以在 6 个内置的spring bean 作用域内创建 bean ,您也可以定义自定义 bean 作用域。在这六个作用域中,只有在您使用 Web 感知的Appli...
升级环境说明目前项目使用的2.3.7版本(自己感觉还行,但是官方已经停止支持了。)Spring Boot 官方支持情况spring boot 官方支持情况官方在今年8月就终止了对2.3.x的版本...
Spring框架中,可以在6个内置的Scope中创建bean,也可以定义自定义范围。 在这六个范围中,只有在使用Web感知的ApplicationContext时才有四个范围可用。singlet...
前言使用Spring Boot 3 Security 6.2 JWT 完成无状态的REST接口认证和授权管理。环境JDK 17Spring Boot 3.3.2
从Spring 6和Spring Boot 3开始,Spring框架支持“HTTP API的问题详细信息”规范RFC 7807。本Spring Boot 教程将详细指导您完成这一新增强。1.问题...
 spring boot 获取文件的mime type类型名称String contentType = ""; Optional<MediaType&gtl; mediaT...
Spring WebFlux 项目实战 在Spring WebFlux中创建多个RouterFunctions,在这篇文章中,我们将着眼于在Spring WebFlux中将多个路由器功能定义到不...
spring boot 2.0 security 5.0 整合,实现自定义表单登录。spring boot 2.0框架使用。
从Spring 6和Spring Boot 3开始,Spring framework支持将远程HTTP服务代理为带有HTTP交换注解方法的Java接口。类似的库,如OpenFeign和Retro...
从Spring 6和Spring Boot 3开始,与OpenFeign和Retrofit等其他声明式客户端类似,Spring框架支持以Java接口的形式创建RSocket服务,并为RSocke...
引言    通过之前spring boot mybatis 整合的讲解: spring boot mybaties整合  (spring boot mybaties 整合 基于Java注解方式写...
spring boot 整合spring security采用mongodb数据库方式