Angular中如何保留HTTP代理请求的原始响应头？

要保留代理响应中的原始响应头（包括令牌相关的自定义头），需要修改代理配置，确保响应头被正确转发并允许前端访问，具体操作如下：

1. 修改proxy.conf.js配置 #

在代理配置中添加onProxyRes钩子函数，负责复制原始响应头到代理响应，并通过Access-Control-Expose-Headers暴露自定义头给前端：

var HttpsProxyAgent = require('https-proxy-agent');

var proxyConfig = [{
    context: '/api',
    target: '{{external_url}}',
    secure: true,
    changeOrigin: true,
    logLevel: "debug",
    pathRewrite: {
        "^/api": ""
    },
    // 添加响应处理钩子
    onProxyRes: function(proxyRes, req, res) {
        // 复制所有原始响应头到代理响应
        Object.keys(proxyRes.headers).forEach(key => {
            res.setHeader(key, proxyRes.headers[key]);
        });

        // 暴露自定义响应头给前端（替换成你实际需要的头名称）
        const requiredHeaders = 'X-Auth-Token, X-Your-Custom-Header';
        // 保留原始响应中已有的暴露头配置，避免覆盖
        const existingExposeHeaders = proxyRes.headers['access-control-expose-headers'] || '';
        const finalExposeHeaders = existingExposeHeaders ? `${existingExposeHeaders},${requiredHeaders}` : requiredHeaders;
        
        res.setHeader('Access-Control-Expose-Headers', finalExposeHeaders);
    }
}];

function setupForCorporateProxy(proxyConfig){
    var proxyServer = "{{proxyServer}}";
    if(proxyServer){
        var agent = new HttpsProxyAgent(proxyServer);
        proxyConfig.forEach(function(entry){
            entry.agent = agent;
        });
    }
    return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

2. 关键原理说明 #

• 默认情况下，Angular使用的http-proxy-middleware只会转发浏览器认可的「CORS安全响应头」（如Content-Type、Cache-Control等），自定义头（如令牌头）不会自动转发。
• 浏览器出于安全限制，即使代理转发了自定义头，前端也无法直接访问，必须通过Access-Control-Expose-Headers明确声明允许访问的自定义头。

3. 验证前端请求 #

你的前端请求代码已经正确使用了observe: 'response'来获取完整响应对象，修改代理配置后重启Angular开发服务器，即可在res.headers中拿到原始响应的所有暴露头：

corsRequest(){
    this.http.get("/api", {responseType: 'text', observe: 'response'})
    .subscribe(res => {
        console.log(res.headers); // 现在可以看到原始响应头
        // 比如获取令牌头：res.headers.get('X-Auth-Token')
    });
}

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