Node.js如何配置Expose response header将指定响应头暴露给浏览器

问题根因说明 #

浏览器默认仅允许JS读取CORS安全列表内的响应头，自定义头比如x-cloud-trace-context需要通过Access-Control-Expose-Headers暴露才可以访问，配置后失效以及触发预检都属于配置不到位或者浏览器正常机制范畴，按以下步骤修复即可：

第一步：修正ExposedHeaders配置 #

配置必须同时满足以下要求：

• Access-Control-Expose-Headers必须配置在实际业务请求的响应头中，仅配置在OPTIONS预检请求的响应头不生效
• 头字段名称必须和实际返回的自定义头完全一致，严格匹配大小写，多个字段用英文逗号分隔
• 配置时添加always参数（Nginx等反向代理场景），避免仅在2xx状态码下返回配置导致非成功响应下头不生效

常见配置示例：

Nginx配置示例

add_header Access-Control-Expose-Headers "x-cloud-trace-context" always;
add_header Access-Control-Allow-Origin "*" always;

Spring Boot配置示例

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .exposedHeaders("x-cloud-trace-context")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

第二步：预检请求适配 #

触发预检是浏览器的正常安全机制，非简单请求（比如带自定义头、Content-Type不是application/x-www-form-urlencoded/multipart/form-data/text/plain、请求方法是PUT/DELETE等）都会触发OPTIONS预检，无需避免，只要正确处理即可：

• 服务端对OPTIONS请求返回200或204状态码
• OPTIONS请求响应头中需要返回Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers三个必填CORS头
• 配置Access-Control-Max-Age头缓存预检结果，示例值为86400，即24小时内同规则请求无需重复触发预检

第三步：常见错误排查 #

• 清除浏览器缓存后再测试，旧的CORS配置和响应结果可能被浏览器缓存导致新配置不生效
• 检查反向代理、CDN、WAF等中间层是否剥离了自定义响应头或者覆盖了Access-Control-Expose-Headers配置
• 不要在前端代码中配置exposedHeaders，该规则由服务端返回的响应头控制，前端配置无任何作用
• 测试时打开浏览器控制台网络面板，确认实际业务请求的响应头中同时存在x-cloud-trace-context和包含该字段的Access-Control-Expose-Headers，即可通过response.headers.get('x-cloud-trace-context')正常读取

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