Angular2 - 如何将 HTTP 标头添加到我的应用程序发送到浏览器的响应中？答案

【问题标题】：Angular2 - How can I add HTTP headers to responses my app sends to the browser?Angular2 - 如何将 HTTP 标头添加到我的应用程序发送到浏览器的响应中？
【发布时间】：2017-03-30 17:13:34
【问题描述】：

我正在为工作中的 Angular2 应用程序制作原型。该应用程序应该在一些公司中间件下运行，该中间件期望从 angular2 应用程序获得的响应中有多个 Link 标头。不幸的是，我无法弄清楚如何为 Angular 提供的开箱即用的响应添加标头。

澄清我的意思 - 当我直接向我的 Angular 应用程序发送 GET 请求时，它会发回浏览器可以呈现到 SPA 中的文本/HTML 响应。我想在这个响应中添加标题，但不知道怎么做。我发现最接近的是这里的讨论：Angular2 - set headers for every request

这听起来像是重复的，但是在查看了类似的问题后，我发现了如何将标头添加到我使用来自 HttpModule 的 HTTP 对象显式生成的响应中，而不是如何附加标头Angular 开箱即用地创建的响应。我很想使用像 HTTP 拦截器这样的东西，它只是将标头附加到我的应用程序发出的每个响应中，但看起来 Angular2 在 4.1 版之前不会有拦截器。

编辑：我尝试过的事情：

在我的（主）AppModule 中为 Http ResponseOptions 添加提供程序，用于向响应添加标头
- 这会将标头添加到我从我的应用从 HttpModule 接收的 http 请求中收到的所有响应中，但不会将标头添加到我的应用本身发送到外部服务的响应中。

编辑 2：我误解了我的 Angular 应用程序在哪里结束以及托管它的服务器从哪里开始。可以在服务器中添加这样的标头 - 对于我的简单示例，我需要配置 webpack-dev-server。请参阅下面接受的答案。

【问题讨论】：

我对您的描述感到困惑 - Angular 应用程序通常发送请求并接收响应。您编写的 Angular 应用程序具有服务器的角色。
@SteveG。我目前正在使用github.com/AngularClass/angular2-webpack-starter。默认情况下，启动器在 localhost:3000 托管应用程序。向 localhost:3000 发送 GET 请求将返回一堆 HTML，以及一些标头 - Accept-Ranges、Access-ControlAllow-Origin 等。我想将我自己的自定义标头/值对添加到这些标头中。
@JánHalaša 很可能这不是 Angular 支持的东西，我对框架完全陌生，不确定我是否正确使用它。
所以您正在向开发 Web 服务器 localhost:3000（不是您的 Angular 应用程序）发送一个 GET 请求，并且您想要开发 Web 服务器 发送您的附加标题？（这可能是混乱所在：Web Starter Pack 使用 webpack-dev-server 只是作为开发托管平台/服务器供您使用，但最终它不是您最终 Angular 应用程序的一部分）。跨度>
啊哈！这实际上是我的误解。通过配置开发服务器，我可以得到我需要的功能！究竟是什么构成了应用程序以及部署它的服务器是什么，一旦我尝试部署这个原型，我会在一两天内弄清楚。

标签： angular http-headers angular4

【解决方案1】：

Web Starter Pack 将webpack-dev-server 用作您的工作的开发托管平台/Web 服务器，但它不是，最终，您的一部分最终的 Angular 应用程序正确。您最终将通过其他一些强化的 Web 服务器软件（例如 Apache、IIS 等）为您的 Angular 应用程序提供服务。

出于开发目的，您应该能够通过设置headers 选项，根据documentation 修改您的webpack.config.js，将webpack-dev-server 配置为添加自定义标头。

devServer.headers

为所有请求添加标头：
headers: {
  "X-Custom-Foo": "bar"
}

例如：

webpack.config.js

...
devServer: {
  ...
  headers: {
    "X-Custom-Foo": "bar"
  }
  ...
}
...

虽然要在 Angular 应用程序初始化后实际读取“初始加载”标头（如果这是您要执行的操作），但您可能需要将值添加为 [non-httpOnly] cookie，然后在 ngInit() 上阅读它们。

来源：DevServer Documentation - Header

【讨论】：

【解决方案2】：

我不知道 angular2-webpack-starter，但我猜它只是一个命令行工具，可以轻松开发您的 Angular 应用程序。所以它只为你的 JavaScript、HTML 和资产提供服务。这不是应用程序本身。 Angular 应用程序在浏览器中运行并充当后端的客户端。因此，您需要另一台服务器来为您的后端应用程序提供服务，并且您的所有 XHR 调用都将转到该后端。当您部署应用程序时，它可能不会在 angular2-webpack-starter 中运行，而是在一些更高级的 HTTP 服务器中运行，例如 Apache HTTPD 或 nginx。

然后你需要创建一个自定义的Http服务（扩展angular自己的Http服务）或者XHRBackend。它可以访问 Request 和 Response 对象，并且可以在那里添加额外的标头。

【讨论】：