Angular：将自定义 HTTP 响应 headers 添加到开发 `ng serve`

Question

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

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

但我仍然不清楚是否有可能做到这一点，如果可能的话如何实现。

我添加了一个 proxy.config.js 文件（引用自 angular.json，第 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';
    }
};

是否可以在不使用 third-party 服务器的情况下这样做？

Answer 1

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

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

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

Answer 2

noga 的回答对于 proxy.conf.js 需要的样子是正确的。在 Angular 版本 8+（我猜是因为新构建器 API 的稳定性和对 webpack 的更新）需要做更多的事情。

这一切都建立在 webpack-dev-server 和 http-proxy-middleware 的基础上，如果您查看 webpack 网站 https://webpack.js.org/configuration/dev-server/#devserverproxy 上的信息，它会说：

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value

不幸的是，ng serve 没有直接公开此属性，它是 proxy 的兄弟属性，它接收 proxy.conf.js 的输出。您可以创建自己的构建器或您可以深入研究 node_modules > @angular-devkit > build-angular > src > dev-server > index.js 并在定义 webpackDevServerConfig 之后插入 webpackDevServerConfig.index = '';。

对我有用运行 Angular 9.

更新：Angular11

一位评论者指出，这种方法不适用于 Angular11。现在我已经硬着头皮升级了，我有了一个可行的解决方案。

原理还是一样的：dev server的配置需要把index 属性设置为空串

在同一个文件的第87行定义config后，插入config.devServer.index = "".

Answer 3

在Angular11中，以上解决方案均无效。

由于上面的上下文是开发服务器（这是我的用例），我最终所做的只是通过禁用 CROS 检查来启动 Chrome。

这种方法的好处是：(i) 避免 Angular 或 Node 更改破坏你 (ii) 无需更改即可让不同端口上的本地开发工作。

例如，在 Mac 上：

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

更多信息如下：

https://alfilatov.com/posts/run-chrome-without-cors/

https://medium.com/@siddhartha.ng/disable-cross-origin-on-chrome-for-localhost-c644b131db19

Answer 4

通过代理配置的解决方案对我不起作用 (Angular 12)。然而结果是 headers 可以在 options 下为 @angular-devkit/build-angular:dev-server 指定，像这样：

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

Angular：将自定义 HTTP 响应 headers 添加到开发 `ng serve`

Angular: add custom HTTP response headers to dev `ng serve`

angular-cli

angular