Spring Boot 中的 CORS 与 Spring Security + React

Question

部署后，我遇到了 CORS 问题。我可以直接从我的 API 访问数据，但是在尝试从 React 应用程序中获取数据时，我遇到了图像中的问题：

我尝试添加过滤器以添加到每个标题 Access-Control-Allow-Origin 中，它现在从 API 返回数据，我可以在浏览器控制台中看到它，但反应无法获取它

WebSecurity.java

@Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors().and().csrf().disable();

    http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and();

    http.exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and();

    http.authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .antMatchers("/api/test/**").permitAll()
            .anyRequest().authenticated();

    http.addFilterBefore(authenticationJwtTokenFilter(), UsernamePasswordAuthenticationFilter.class);

}

@Bean
public FilterRegistrationBean crosFilterRegistration(){
    FilterRegistrationBean registrationBean = new FilterRegistrationBean(new MyCorsFilter());
    registrationBean.setName("CORS Filter");
    registrationBean.addUrlPatterns("/*");
    registrationBean.setOrder(1);
    return registrationBean;
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Collections.singletonList("https://*************"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"));
    configuration.setAllowedHeaders(Arrays.asList("Access-Control-Allow-Headers", "Access-Control-Allow-Origin",
            "Access-Control-Request-Method", "Access-Control-Request-Headers", "Origin",
            "Cache-Control", "Content-Type"));
    configuration.setAllowCredentials(true);

    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

MyCorseFiltre.java

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class MyCorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        final HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", "https://**************");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, HEAD, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
        response.setHeader("Access-Control-Max-Age", "3600");
        if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) req).getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void destroy() {
    }

    @Override
    public void init(FilterConfig config) throws ServletException {
    }
}

Application.java

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("https://*************");
        }
    };
}

Answer 1

这一行

response.setHeader("Access-Control-Allow-Origin", "https://**************");

添加重复的标题。这一行也是如此：

configuration.setAllowedOrigins(Collections.singletonList("https://*************"));

其中一个就足够了。最好是后者。您拥有的大多数 CORS 配置也是如此。