Spring Security 跨域读取阻塞 (CORB) - Angular App

Question

我有一个 Angular 4 应用程序，可以显示用户的信息资料。该应用程序位于https://www.myapp.com，但用户的头像位于https://s3-sa-east-1.amazonaws.com/xxxx.png。 Angular 应用程序向我的 Spring Boot 后端发出 Get 请求以获取用户配置文件信息，但配置文件图像未加载，浏览器显示以下错误：

跨域读取阻塞 (CORB) 阻止了跨域响应 https://s3-sa-east-1.amazonaws.com/xxxx.png MIME 类型应用程序/xml。看 https://www.chromestatus.com/feature/5629709824032768 了解更多 详情。

我的问题是如何配置我的 Spring Boot 应用程序以防止跨域读取阻塞 (CORB)？

接下来我展示我的 spring 应用程序的安全设置：

@Configuration
@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {


    private UserDetailsService userDetailsService;

    private BCryptPasswordEncoder bCryptPasswordEncoder;

    public WebSecurity(UserDetailsService userDetailsService, BCryptPasswordEncoder bCryptPasswordEncoder) {
        this.userDetailsService = userDetailsService;
        this.bCryptPasswordEncoder = bCryptPasswordEncoder;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable()
        .authorizeRequests().antMatchers(HttpMethod.POST, USER_REGISTRATION_URL).permitAll()
        .antMatchers(HttpMethod.POST, RETURN_DATA).permitAll()
        .anyRequest().authenticated()
        .and().addFilter(new JWTAuthenticationFilter(authenticationManager(), getApplicationContext()))
        .addFilter(new JWTAuthorizationFilter(authenticationManager(), getApplicationContext()))
        .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }


    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("*");
        configuration.addAllowedHeader("*");
        configuration.setAllowedMethods(Arrays.asList("GET","POST","PUT","PATCH","DELETE","OPTIONS"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }


} 

我想了解为什么会发生这种情况，尽管显示了配置，这应该足够了。

非常感谢！

Answer 1

此问题与为您的 API 提供服务的 Spring Boot 应用无关。

问题在于，在您的 Angular 应用程序从 Spring Boot 应用程序接收到配置文件信息后，它会尝试从您的 S3 存储桶加载图像，而您的 S3 存储桶没有为 CORS 配置。因此，浏览器向 S3 请求图像，请求被阻止。

要解决此问题，您必须配置 S3 存储桶以支持 CORS。 亚马逊文档https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

中提供了有关如何执行此操作的最新信息