SpringSecurity自定义过滤器返回401导致前端Axios报错且禁止跨域的坑

​

前端使用的是Vue3+Axios1.4

后端端使用的是SpringBoot3.0.2+SpringSecurity+SpringCloudGateway

问题描述： 前端Axios只要请求报错401就会出现跨域问题，且获取不到AxiosError.response

问题解决：

AxiosError获取不到response是因为Axios会在禁止跨域的时候不允许获取response。只要解决了跨域问题就可以了。

后端已经配置了跨域，并且设置了添加了过滤器JwtTokenFilter，顺序是SecurityWebFiltersOrder.FIRST之后

@Configuration
@EnableWebFluxSecurity
public class SecurityConfig {
    @Bean        
    public SecurityWebFilterChain standardSecurityFilterChain(ServerHttpSecurity http) {
        // ...
        http
            .cors(cors -> cors.configurationSource(corsConfigurationSource()))
            .addFilterAfter(new JwtTokenFilter(), SecurityWebFiltersOrder.FIRST);
        // ...
        return http.build();
    }

    private CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOriginPattern("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addExposedHeader("*");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(Duration.ofMinutes(1));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return source;
    }


}

但是问题就出现在我们自定义的过滤器JwtTokenFilter上，在这个过滤器里面会进行Token的校验，会给前端响应401或者403等。

当响应401或者403的时候，请求就在此结束了，但此时并未设置CORS相关的响应头。

过滤器的顺序如下：

所以最终的解决方法是将自定义的JwtTokenFilter的顺序放置CorsWebFilter之后。

http.addFilterAfter(new JwtTokenFilter(), SecurityWebFiltersOrder.CORS);

这样每次请求进来，在进行Token校验之前就会先被CorsWebFilter设置上Cors相关的响应头。

​