Spring Boot无法接收Angular自定义请求头，但Curl可正常接收

1. 修复Angular端HttpHeaders的使用错误 #

Angular的HttpHeaders是不可变对象，调用append()方法不会修改原实例，而是返回一个新的HttpHeaders对象。你的代码里没有接收这个新对象，导致实际发送的请求头是空的。

修改后的代码：

getData(): Observable<any> {
    const url = 'http://localhost:8080/data';
    // 链式调用append，直接生成新的HttpHeaders实例
    const headers_obj = new HttpHeaders()
        .append('Content-Type', 'application/json')
        .append('Batman', 'Forever');
    const httpOptions = {
        headers: headers_obj,
    };
    console.log('Provided user: ', this.username);
    return this.http.get<any>(url, httpOptions);
}

或者分步赋值：

let headers_obj = new HttpHeaders();
headers_obj = headers_obj.append('Content-Type', 'application/json');
headers_obj = headers_obj.append('Batman', 'Forever');

2. 处理后端CORS预检请求 #

自定义请求头（如Batman）属于非简单请求，浏览器会先发送OPTIONS预检请求确认后端是否允许该头。如果后端没有正确配置CORS，预检请求失败，浏览器不会发送实际的GET请求，自然后端收不到自定义头。

方案一：添加Spring Boot CORS配置类 #

创建一个全局CORS配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 替换为你的Angular应用地址（如http://localhost:4200）
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 明确允许自定义头，或者用"*"允许所有头
                .allowedHeaders("Content-Type", "Batman")
                .allowCredentials(true);
    }
}

方案二：在自定义Filter中处理OPTIONS请求 #

修改你的MyFilter，先处理OPTIONS预检请求并设置响应头：

@Configuration
public class MyFilter extends OncePerRequestFilter {
    private final Logger log = LoggerFactory.getLogger(getClass());
    
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        // 设置CORS响应头
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Batman");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        // 处理OPTIONS预检请求，直接返回200
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }

        String header = request.getHeader("Batman");
        log.info("Batman: "+ header);
        request.getHeaderNames().asIterator().forEachRemaining(s -> log.info(s));
        filterChain.doFilter(request, response);
    }
}

完成以上两步后，Angular发送的自定义请求头就能被后端Filter正常接收了。

内容的提问来源于stack exchange，提问作者Nadirspam