Angular不使用HttpIntercepter，错误场景下获取自定义响应头

嘿，这个问题我之前也碰到过！其实是**CORS（跨域资源共享）**的限制在搞鬼——默认情况下，跨域请求时浏览器只会把少数「简单响应头」暴露给前端，你那些x-开头的自定义头不在这个默认列表里，所以就算服务器返回了，前端也拿不到。

为什么看不到自定义响应头？ #

浏览器规定，跨域场景下只有以下响应头是默认暴露的：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

所有自定义头（比如x-error-code、x-request-id这类）都属于非简单头，必须由服务器明确配置允许暴露，前端才能通过headers.get()获取到。

解决方案：服务器端配置Access-Control-Expose-Headers #

你需要在服务器端添加Access-Control-Expose-Headers响应头，把需要暴露的自定义头列出来。下面是几种常见服务器的配置示例：

1. Node.js + Express #

// 在接口响应中设置
res.setHeader('Access-Control-Expose-Headers', 'x-error-code, x-custom-message');

2. Spring Boot #

局部控制器配置

@RestController
@CrossOrigin(exposedHeaders = {"x-error-code", "x-custom-message"})
public class YourController {
    // 接口逻辑代码
}

全局CORS配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://your-frontend-domain.com") // 生产环境替换为实际前端域名
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .exposedHeaders("x-error-code", "x-custom-message");
    }
}

3. Nginx #

在你的接口location配置块中添加：

location /api {
    # 基础CORS配置
    add_header Access-Control-Allow-Origin "https://your-frontend-domain.com";
    # 暴露自定义响应头
    add_header Access-Control-Expose-Headers "x-error-code, x-custom-message";
}

前端无需额外修改 #

服务器配置完成后，你原来的代码不需要改动，直接通过error.headers.get('你的自定义头名称')就能拿到对应的值了，比如：

return this.http.post(url, body, {headers: headers, observe: 'response'}).pipe(
    catchError(error => {
        const customErrorCode = error.headers.get('x-error-code');
        console.log('自定义错误码:', customErrorCode);
        return HttpClientHelper.handleError(error);
    })
);

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