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

教程分享 > Java教程 > Spring (823) 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);
    }
}