CORS error跨域问题的原因分析和解决

什么是CORS error？跨域错误（Cross-Origin Error）是在Web开发中常见的错误之一，它发生在浏览器执行跨源请求（从一个源访问另一个源）时。同源策略（Same-Origin Policy）是浏览器的安全机制，它限制了通过脚本在不同源之间进行跨域通信。"源"是由协议、主机名和端口号组成的标识符。如果两个页面的协议、主机名和端口号完全相同，则它们被视为同源。反之，协议、主机名和端口号只要有一个不同，则属于不同源。同源策略的存在是为了保障网站安全、防止跨站脚本攻击。

我接触的项目里有通过重写WebMvcConfigurer的addCorsMappings方法

@Override
    public void addCorsMappings(CorsRegistry corsRegistry){
        corsRegistry.addMapping("/**")
                .allowCredentials(true)
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }
1
2
3
4
5
6
7
8
9

或者controller里加@CrossOrigin注解
发现没有生效，浏览器仍报CORS error

代码报错位置和调试发现每次报错都是在HandlerInterceptor的preHandle重写方法里，这时怀疑和全局的拦截器有关，通过设置不拦截特定的请求发现的确生效，但是拦截器又不可能全部关闭；

回到最开始的问题，浏览器报了跨域，为什么呢？
浏览器如何判断当前是否跨域呢？当发送跨域的POST请求时，浏览器会在发送真实请求之前先发送一个OPTIONS请求，这个请求相当于一个探子，如果发现目标路径不可达浏览器就会直接拦截前端的请求，导致后续的真实请求（比如GET、POST、PUT、DELETE）无法发送到后端。

所以错误的跟本原因在于OPTIONS，由于配置了登录拦截器，对于放行请求，不会有什么问题，但是对于没有放行的请求，会直接拦截OPTIONS请求，OPTIONS请求是一个探测请求，内部并不会携带token，所以就直接导致OTIONS请求被拦截，这样就会让浏览器觉得请求不可达，直接在前端报CORS error；

问题定位了，那就很简单了，拦截器里放行options请求就可以了

@Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        if (request.getMethod().equals("OPTIONS")) {
            //设置了登录全局拦截，会导致跨域的OPTIONS尝试请求被拦截，这里放开
            return true;
        }
        //登录业务判断
        return true;
    }
1
2
3
4
5
6
7
8
9

debug，发现请求都成功了，搞定！