Angular：将自定义 HTTP 响应标头添加到 dev `ng serve`

Question

是否可以向运行的开发服务器添加自定义 HTTP 响应标头ng serve？我想在主html文件请求的响应中专门添加这个自定义标头，尽管如果为每个资源（js文件等）添加它会很好。

我发现了这两个最近的 Angular 问题：

• https://github.com/angular/angular-cli/issues/15095
• https://github.com/angular/angular-cli/issues/15729

但我仍然不清楚是否有可能做到，以及是否有可能如何实现。

我添加了一个proxy.config.js文件（从angular.json, section引用projects -> my-app -> architect -> serve -> options -> proxyConfig）并尝试了几个配置，如下所示，但没有成功：

module.exports = {
    "/": {
        'headers': {
            'X-Custom-Foo': 'bar'
        },
        onProxyRes: (proxyRes, req, res) => {
            proxyRes.headers['x-added'] = 'foobar';
        }
    },
    'headers': {
        'X-Custom-Foo': 'bar'
    },
    onProxyRes: (proxyRes, req, res) => {
        proxyRes.headers['x-added'] = 'foobar';
    }
};

是否可以在不使用第三方服务器的情况下这样做？

Answer 1

通过代理配置的解决方案对我来说不起作用（Angular 12）。然而事实证明，可以在文件中的optionsfor下指定标头，如下所示：@angular-devkit/build-angular:dev-serverangular.json

{
    ...
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
            "browserTarget": "project:build",
            "headers": {
                "Referrer-Policy": "no-referrer-when-downgrade"
            }
        }
    }
    ...
}

Answer 2

假设您正在尝试模拟设置相同响应标头值的生产环境：您可以bypass在代理配置中使用而不是onProxyRes. 您不会尝试将调用重定向到另一台服务器（target值）并在 中处理答案onProxyRes，因此请避免使用它并尝试使用bypass. 它应该可以正常工作;)

proxy.conf.js 看起来像这样：

module.exports = {
    "/": {
        "secure": false,
        "bypass": (req, res, proxyOptions) => {
            res.setHeader('X-Header-Test', 'bacon');
         };
    }
};