解决JS请求跨域时后端CorsFilter不生效的问题

 一、项目环境

        Java版本：1.8

        SpringBoot版本：2.1.2

        VUE版本：2.6.11

二、问题描述

1、因为一些原因要在前端中嵌入一个静态HTML页面，且此静态HTML页面使用ajax发起请求获取数据。

2、因为数据安全问题，所有数据请求都必须在请求头中加上token用于鉴权。

3、测试时出现了以下报错：

三、解决问题的过程

1、在查看报错并在网上查询后得知这个报错是由于静态HTML页面发起请求跨域导致的。

2、由于项目限制，选择后端解决跨域问题。在尝试CorsFilter跨域配置后，发现完全不起作用。

3、后来想到项目里为了拦截非登陆请求，还写了一个自定义的JWT过滤器，是不是多个过滤器的情况下，CorsFilter顺序靠后导致配置不生效。在网上查询这方面后找到一篇文章说明了这个问题，如下图：（原文链接：java 跨域 配置CorsFilter不生效原因_七濑武的博客-CSDN博客）

四、问题原因

根据找到的博文修改代码后，再次尝试后跨域请求成功。最后确定原因为：CorsFilter没有实现Filter接口，导致跨域配置不生效。如果存在多个自定义过滤器的情况下，最好把跨域过滤器设置为最高优先级，详情见下面代码的倒数第二行。

五、代码

最后，上代码。解决本次失效问题的主要是这行代码：

FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(corsSource));

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @Description 解决跨域问题的配置类
 * @Author LuoFc on 2023/8/15 8:44
 */
@Configuration
public class CorsConfig {

    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter() {
        // 1. 添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
        // Response Headers里面的Access-Control-Allow-Origin: http://localhost:8080
        // 其实不建议使用*，允许所有跨域
        config.addAllowedOrigin("*");

        // Response Headers里面的Access-Control-Allow-Credentials: true
        config.setAllowCredentials(true);

        // 设置允许请求的方式，比如get、post、put、delete，*表示全部
        // Response Headers里面的Access-Control-Allow-Methods属性
        config.addAllowedMethod("*");

        // 设置允许的header
        // Response Headers里面的Access-Control-Allow-Headers属性，这里是Access-Control-Allow-Headers: content-type, headeruserid, headerusertoken
        config.addAllowedHeader("*");

        // Response Headers里面的Access-Control-Max-Age:3600
        // 表示下回同一个接口post请求，在3600s之内不会发送options请求，不管post请求成功还是失败，3600s之内不会再发送options请求
        // 如果不设置这个，那么每次post请求之前必定有options请求
        config.setMaxAge(3600L);

        // 2. 为url添加映射路径
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        // /**表示该config适用于所有路由
        corsSource.registerCorsConfiguration("/**", config);

        // 当存在多个Filter时，需要通过如下方式返回一个新的FilterRegistrationBean出去，并设置order。否则会导致跨域配置失效
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(corsSource));
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);

        // 3. 返回重新定义好的corsSource
        return bean;
    }
}

 本文只是记录一个问题解决的过程。因为项目的限制，我碰上这个问题也不具有普遍性，跨域的解决方案也有很多种。如果有更好的方案，大家也可以交流交流。