少数用户的 Chrome CORS 阻塞和少数用户的工作正常：Spring boot + Angular App

Posted 2023-03-04

【中文标题】少数用户的 Chrome CORS 阻塞和少数用户的工作正常：Spring boot + Angular App

【英文标题】：Chrome CORS block for few users and its working fine for few users : Spring boot + Angular App

【发布时间】：2020-12-30 11:24:54

【问题描述】：

我有一个用 Angular 编写的单页应用程序，它与用 Spring boot 编写的后端 API 对话。

我在我的 Spring Boot 应用程序中使用以下配置

@Configuration
public class CorsFilterConfiguration 

    @Bean
    public FilterRegistrationBean corsFilterRegistrationBean() 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.applyPermitDefaultValues();
        config.setAllowCredentials(true);
        config.setAllowedOrigins(Arrays.asList("*"));
        config.setAllowedHeaders(Arrays.asList("*"));
        config.setAllowedMethods(Arrays.asList("*"));
        config.setExposedHeaders(Arrays.asList("content-length"));
        config.setMaxAge(3600L);
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return bean;
    

    

网络安全配置

@EnableWebSecurity
@Configuration
public class WebSecurityConfiguration 

    @Configuration
    @EnableGlobalMethodSecurity(prePostEnabled = true)
    public static class OAuth2SecurityConfiguration extends WebSecurityConfigurerAdapter 

        @Autowired
        JwtDecoder jwtDecoder;

        @Value("$audience-id")
        String audience;

        @Override
        public void configure(HttpSecurity http) throws Exception 
            JwtDecoder jwtDecoderWrapper = wrapJwtDecoderWithAudienceCheck(this.jwtDecoder, audience);
            http
                    .csrf()
                    .disable()
                    .authorizeRequests()
                    .antMatchers("/swagger-ui.html", "/error", "/swagger-resources/**", "/webjars/**", "/v2/api-docs", "/test/**", "/api/v1/office/**", "/health").permitAll()
                    .anyRequest().authenticated()
                    .and()
                    .sessionManagement()
                    .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                    .and()
                    .oauth2ResourceServer()
                    .jwt()
                    .decoder(jwtDecoderWrapper);
        

        static JwtDecoder wrapJwtDecoderWithAudienceCheck(JwtDecoder jwtDecoder, String audience) 
            return (token) -> 
                Jwt jwt = jwtDecoder.decode(token);
                if (jwt.containsClaim(AUD) && !jwt.getClaimAsStringList(AUD).contains(audience)) 
                    throw new JwtValidationException("Audience field does not match: " + audience, Arrays.asList(new OAuth2Error("invalid_aud")));
                
                return jwt;
            ;
        

    

它对我和我的团队成员来说非常好用。我们没有遇到 CORS 问题。但我们的用户中很少有人面临 CORS 问题

我通过 CURL 命令发出了几个预检请求

curl -i -H "access-control-request-headers: 授权，内容类型" -H "access-control-request-method: GET" -H "origin: https://ui.app.com " -X 选项https://api.app.com/api/v1/contacts

它工作得很好，并且正在正确获取标题

HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization, content-type
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: https://ui.app.com
Access-Control-Expose-Headers: content-length
Access-Control-Max-Age: 3600
Content-Length: 0
Date: Fri, 11 Sep 2020 23:23:44 GMT
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Vcap-Request-Id: 3023da74-f39e-4269-4f0d-abdba6e6cb88

但仍然不确定为什么只有少数用户面临这个问题。有人可以帮忙吗？

【参考方案1】：

我解决了这个问题。只有少数用户，浏览器被 CORS 问题阻止，经过调查，我们发现这些用户的 access-token（被 CORS 阻止）非常大（其中有很多声明）。所以我们改变了我们的令牌声明计划我们的 Auth-server 并让 access-token 只获得很少的声明..

这解决了问题