has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check

1、报错场景

可能你用postman或者apifox测试接口没有任何问题，但是前端一旦加入就报CORS跨域问题，甚至说本地联调都OK，但是部署到服务器上就出现跨域问题，其实过来过去还是因为请求的发起没有被后端允许。

报错如下：

Access to XMLHttpRequest at 'http://xxxx/xxxx-ui' 
from origin 'http://xxxx/xxxx/xxxx-server' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
It does not have HTTP ok status.

2、报错原因及解决（默认Header参数的情况）

加个过滤器或者拦截器，把所有的请求响应都处理一下，根据场景不同，可能你只需要下面其中一种方式就能解决问题；

2.1、处理请求拦截

package xxx;

/**
 * 配置自定义拦截器
 */
@Configuration
@Slf4j
public class InterceptorConfig implements WebMvcConfigurer {

	public void addInterceptors(InterceptorRegistry registry) {
		// 拦截所有请求
		registry.addInterceptor(globalInterceptor()).addPathPatterns("/**");
		log.info("系统拦截器初始化完成");
	}
	
	@Bean
	public GlobalInterceptor globalInterceptor() {
		return new GlobalInterceptor();
	}

	// 拦截器跨域配置
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		// 跨域路径
		CorsRegistration cors = registry.addMapping("/**");
		// 可访问的外部域
		cors.allowedOrigins("*");
		// 支持跨域用户凭证
		//(true);
		//("*");
		// 设置 header 能携带的信息
		cors.allowedHeaders("*");
		// 支持跨域的请求方法
		cors.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
		// 设置跨域过期时间，单位为秒
		cors.maxAge(3600);
	}

	// 简写形式
//	@Override
//	public void addCorsMappings(CorsRegistry registry) {
//		("/**")
//				.allowedOrigins("*")
//				//.allowCredentials(true)
//				//.allowedOriginPatterns("*")
//				.allowedHeaders("*")
//				.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
//				.maxAge(3600);
//	}

}

2.2、处理响应过滤

package xxx;

@Order(1)
@WebFilter(filterName = "corsFilter", urlPatterns = {"/*"})
public class CORSFilter implements Filter{

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("初始化CORS过滤器...");
    }
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*"); //  这里最好明确的写允许的域名
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token,Authorization,ybg,x_access_token");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {
        System.out.println("销毁CORS过滤器.");
    }
}

3、报错原因及解决（自定义Header参数的情况）

如果是自定义Header参数的话，前端发起ajax请求后，浏览器首先会发起一个预检请求（OPTIONS），然后才是业务请求，所以在预检请求的时候浏览器就已经输出跨域报错了，因此针对自定义Header需要把这个预检请求排除掉；

package xxx;

/**
 * 过滤器
 */
@Slf4j
public class GlobalInterceptor implements HandlerInterceptor {
	
	//...
	
	/**
	 * 拦截所有请求，校验url和token
	 */
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
		//加上校验放行
		if(request.getMethod().equals("OPTIONS")){
			return true;
		}else{
			///
		}
		return false;
	}
	
	//...
}

秒客网