解决 Angular 与 Spring Boot 跨域请求被阻止的问题

本文详解如何在 spring boot 中正确配置 cors，解决 angular 前端（http://localhost:4200）调用后端接口（http://localhost:8090）时因预检失败导致的 “request header field domain is not allowed by access-control-allow-headers” 错误。

在前后端分离开发中，Angular 运行于 http://localhost:4200，而 Spring Boot 后端部署在 http://localhost:8090，浏览器会因同源策略触发跨域检查（CORS）。你遇到的错误：

Access to XMLHttpRequest at 'http://localhost:8090/bites/service/signup' 
from origin 'http://localhost:4200' has been blocked by CORS policy: 
Request header field domain is not allowed by Access-Control-Allow-Headers in preflight response.

关键线索在于 Request header field domain —— 这说明你的 Angular 请求中包含了自定义请求头（例如 domain），但 Spring Boot 的 CORS 配置未将其列入 Access-Control-Allow-Headers 白名单，导致预检（OPTIONS）响应被拒绝。

⚠️ 注意：你当前手动在 Filter 中设置响应头的方式存在严重隐患：

• 未处理 OPTIONS 预检请求的短路逻辑（即对 OPTIONS 请求应直接返回，不执行 chain.doFilter()）；
• Access-Control-Allow-Headers 值未包含 domain，且硬编码的 Header 列表冗长、易遗漏；
• WebMvcConfigurerAdapter 在 Spring Boot 2.4+ 已被弃用，新版本需使用函数式配置。

✅ 推荐方案：采用 Spring Boot 官方推荐的 WebMvcConfigurer Bean 方式统一管理 CORS，简洁、安全、可维护。

问问小宇宙

问问小宇宙是小宇宙团队出品的播客AI检索工具

下载

✅ 正确配置方式（Spring Boot 2.4+）

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/bites/**")  // 精准匹配 API 路径（推荐）
                    .allowedOrigins("http://localhost:4200")
                    .allowCredentials(true)
                    .allowedHeaders("Origin", "X-Requested-With", "Content-Type", 
                                   "Accept", "Key", "Authorization", "domain") // ✅ 显式添加 'domain'
                    .maxAge(3600);
            }
        };
    }
}

? 小提示：/bites/** 比 /** 更安全，避免对静态资源或管理端点误开 CORS；如需全局开放，可保留 /**，但请确保生产环境严格限制 allowedOrigins（禁用 "*" 配合 allowCredentials(true)）。

✅ 补充：若需支持更多自定义 Header（如 X-Trace-ID）

只需在 allowedHeaders(...) 中追加即可：

.allowedHeaders("Origin", "X-Requested-With", "Content-Type", 
                "Accept", "Key", "Authorization", "domain", "X-Trace-ID")

⚠️ 重要注意事项

• allowCredentials(true) 必须配 allowedOrigins 具体域名：不可使用 "*"，否则浏览器将拒绝该配置；
• Angular 请求需显式启用凭据：确保 HTTP 调用中设置了 withCredentials: true：

  // Angular service 示例
  this.http.post('/bites/service/signup', data, { withCredentials: true })

• 移除旧 Filter 中的手动 CORS 设置：避免与 WebMvcConfigurer 冲突，造成响应头重复或覆盖；
• 检查是否启用了 Spring Security：若已引入 spring-boot-starter-security，需额外配置 Security 层允许 CORS（见下文）。

? Spring Security 用户额外配置（如适用）

若项目集成 Spring Security，请在安全配置类中启用 CORS 并委托给 MVC 配置：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .cors(cors -> cors.configurationSource(request -> {
                CorsConfiguration config = new CorsConfiguration();
                config.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
                config.setAllowCredentials(true);
                config.setAllowedHeaders(Arrays.asList(
                    "Origin", "X-Requested-With", "Content-Type",
                    "Accept", "Key", "Authorization", "domain"
                ));
                config.setMaxAge(3600L);
                return config;
            }))
            .csrf(csrf -> csrf.disable()) // 开发阶段可禁用，生产务必启用并配置
            .authorizeHttpRequests(authz -> authz
                .requestMatchers("/bites/**").permitAll()
                .anyRequest().authenticated()
            );
        return http.build();
    }
}

✅ 总结

完成配置后重启 Spring Boot 应用，Angular 发起的带 domain 头的 POST 请求将顺利通过预检，成功完成注册流程。