Wie konfiguriert man CORS und Basic Authorization im Spring Boot?

Question

Ich versuche, CORS in einer Spring-Boot-Anwendung zu konfigurieren, die bereits grundlegende Auth eingerichtet hat.

Ich habe an vielen Stellen gesucht, einschließlich this answer, die auf Filter based CORS support in der offiziellen Dokumentation verweist.

Bis jetzt kein Glück.

Meine AJAX-Anfrage ist auf diese Weise erfolgt. Es funktioniert, wenn vom selben Ursprung http://localhost:8080 getan wird.

fetch('http://localhost:8080/api/lists', { 
    headers: { 
    'Authorization': 'Basic dXNlckB0ZXN0LmNvbToxMjM0NQ==' 
    } 
} 

Das ist AJAX-Anforderung von einem App Reagieren auf http://localhost:3000 getan, also habe ich versucht, den folgenden Frühling Boot CORS config:

@Configuration 
class MyConfiguration { 

    @Bean 
    public FilterRegistrationBean corsFilter() 
    { 
     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 

     CorsConfiguration config = new CorsConfiguration(); 
     config.setAllowedOrigins(Arrays.asList("http://localhost:3000")); 
     // Maybe I can just say "*" for methods and headers 
     // I just copied these lists from another Dropwizard project 
     config.setAllowedMethods(Arrays.asList("GET", "PUT", "POST", "DELETE", "OPTIONS", "HEAD")); 
     config.setAllowedHeaders(Arrays.asList("X-Requested-With", "Origin", "Content-Type", "Accept", 
      "Authorization", "Access-Control-Allow-Credentials", "Access-Control-Allow-Headers", "Access-Control-Allow-Methods", 
      "Access-Control-Allow-Origin", "Access-Control-Expose-Headers", "Access-Control-Max-Age", 
      "Access-Control-Request-Headers", "Access-Control-Request-Method", "Age", "Allow", "Alternates", 
      "Content-Range", "Content-Disposition", "Content-Description")); 
     config.setAllowCredentials(true); 

     source.registerCorsConfiguration("/**", config); 
     FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source)); 
     bean.setOrder(0); 
     return bean; 
    } 
} 

Mein WebSecurityConfig:

@Configuration 
class WebSecurityConfig extends WebSecurityConfigurerAdapter { 

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

     http.httpBasic().and() 
      .authorizeRequests() 
      .antMatchers("/", "/index.html").permitAll() 
      .anyRequest().fullyAuthenticated(); 
    } 
} 

Der fetch Anruf von http://localhost:3000 zeigt diesen 401-Fehler in der Konsole an:

Abruf-API kann nicht geladen werden http://localhost:8080/api/lists. Antwort für Preflight hat ungültige HTTP-Statuscode 401.

Ein im Netzwerk Registerkarte Chrom dev Werkzeuge, die ich dieses OPTIONS Anfrage siehe:

Answer 1

Ich denke, Sie müssen Erlauben Sie OPTION Anfragen in Ihre Web Security Config. Etwas wie:

.antMatchers(HttpMethod.OPTIONS, "/your-url").permitAll()

Answer 2

Versuchen Sie folgendes:

@Configuration 
public class CorsConfig { 

    @Bean 
    public CorsFilter corsFilter() { 

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
    CorsConfiguration config = new CorsConfiguration(); 
    config.setAllowCredentials(false); //updated to false 
    config.addAllowedOrigin("*"); 
    config.addAllowedHeader("*"); 
    config.addAllowedMethod("GET"); 
    config.addAllowedMethod("PUT"); 
    config.addAllowedMethod("POST"); 
    source.registerCorsConfiguration("/**", config); 
    return new CorsFilter(source); 
    } 

    @Bean 
    public WebMvcConfigurer corsConfigurer() { 
    return new WebMvcConfigurerAdapter() { 
     @Override 
     public void addCorsMappings(CorsRegistry registry) { 
     registry.addMapping("/").allowedOrigins("http://localhost:3000"); 
     } 
    }; 
    } 

}