AWS部署的全栈电商应用中Orders API请求遭CORS策略拦截问题求助

老哥，我一眼就看出问题所在了——你这个是带自定义请求头触发浏览器预检请求导致的CORS拦截，其他API没问题是因为它们属于「简单请求」，而Orders API因为加了AccessToken（应该是Authorization头吧？），变成了「非简单请求」，浏览器会先发一个OPTIONS预检请求，你的配置没处理这个请求，所以才报错。

先理清楚为什么只有Orders API出问题： #

• 你其他的GET API没有带自定义请求头，属于浏览器定义的「简单请求」，这类请求不会触发预检，只要CloudFront配置了允许GET请求和对应Origin，就能正常访问。
• 但Orders API因为你用Angular拦截器加了AccessToken在请求头里，浏览器会先发送一个OPTIONS预检请求到后端，确认服务器是否允许带Authorization头的请求。而你目前的CloudFront和后端配置都没处理这个OPTIONS请求，所以预检失败，浏览器直接拦截了后续的GET请求。

接下来一步步解决： #

1. 调整CloudFront的CORS配置

你之前只允许了GET请求，现在必须补上OPTIONS，还要配置正确的响应头：

• 在CloudFront的行为设置里，修改CORS配置：
  • 允许的HTTP方法：勾选GET和OPTIONS
  • 允许的来源：不要用通配符*（带Authorization头的请求不支持通配符），直接指定https://myshop.com
  • 允许的请求头：添加Authorization、Content-Type这些你用到的头
  • 暴露的响应头：按需添加，比如Content-Length等
  • 注意：OPTIONS预检请求的响应不要缓存，或者设置较短的缓存时间（比如300秒），避免配置更新后缓存旧的响应头

2. 调整Spring Boot后端的CORS配置

因为你的Orders API加了权限控制，还要确保后端的CORS配置覆盖到这个接口，并且放行OPTIONS请求：

• 如果用全局CORS配置，添加如下代码：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 针对Orders API路径配置CORS
        registry.addMapping("/api/orders/**")
                .allowedOrigins("https://myshop.com")
                .allowedMethods("GET", "OPTIONS")
                .allowedHeaders("Authorization", "Content-Type")
                .allowCredentials(false); // 不需要带Cookie的话设为false即可
    }
}

• 如果用了Spring Security，还要确保OPTIONS请求被放行，不然Security会拦截预检请求：

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http.cors().and()
        .authorizeHttpRequests(auth -> auth
            // 放行Orders API的OPTIONS预检请求
            .requestMatchers(HttpMethod.OPTIONS, "/api/orders/**").permitAll()
            // 其他Orders API请求需要认证
            .requestMatchers("/api/orders/**").authenticated()
            // 其他API的配置按需调整
            .anyRequest().permitAll()
        );
    return http.build();
}

3. 验证配置

修改完配置后，清空CloudFront的缓存，然后重新测试：

• 打开DevTools的Network面板，查看请求，应该能看到OPTIONS请求返回200，并且响应头里包含Access-Control-Allow-Origin: https://myshop.com、Access-Control-Allow-Headers: Authorization这些字段
• 之后的GET请求就能正常执行了

备注：内容来源于stack exchange，提问作者Mikey Allen