Как настроить CORS и базовую авторизацию в Spring Boot?

Question

Я пытаюсь настроить CORS в приложении загрузки Spring, которое уже имеет Basic auth setup.

Я искал во многих местах, включая this answer, что указывает на Filter based CORS support в официальных документах.

Пока что не повезло.

Мой запрос AJAX сделан таким образом. Он работает, если выполняется от одного источника http://localhost:8080.

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

Запрос AJAX делается из React приложения на http://localhost:3000, поэтому я попытался следующий Спринг загрузки CORS конфигурации:

@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; 
    } 
} 

Мой WebSecurityConfig:

@Configuration 
class WebSecurityConfig extends WebSecurityConfigurerAdapter { 

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

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

fetch звонок от http://localhost:3000 отображает эту ошибку 401 в консоли:

Fetch API не может загрузить http://localhost:8080/api/lists. Ответ на предполетной имеет недопустимый HTTP код статуса 401.

на вкладке сети хромовых Дев инструментов, которые я вижу этот запрос OPTIONS:

Answer 1

Я думаю, вам нужно разрешите OPTION запросы в конфигурацию вашей сети. Что-то вроде:

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

Answer 2

Попробуйте это:

@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"); 
     } 
    }; 
    } 

}