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

Posted 2023-02-26

【中文标题】Spring Security 跨域读取阻塞 (CORB) - Angular App

【英文标题】：Spring Security Cross-Origin Read Blocking (CORB) - Angular App

【发布时间】：2019-12-25 04:27:30

【问题描述】：

我有一个 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;
    


 

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

非常感谢！

【问题讨论】：

***.com/questions/46788969/…

【参考方案1】：

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

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

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

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

【讨论】：

感谢您的回答...但我已经将 cors 策略添加到我的 s3 存储桶中，但我有同样的错误...我不知道是不是因为我有一个活动的 cloudFront 分配