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

Question

我正在制作 Angular2 应用程序的原型。该应用程序应该运行在某些公司中间件下，该中间件需要几个 Link headers 作为从 angular2 应用程序获得的响应。不幸的是，我一直无法弄清楚如何将 header 添加到 Angular 开箱即用的响应中。

澄清我的意思 - 当我直接向我的 Angular 应用程序发送 GET 请求时，它会发回一个 Text/HTML 响应，浏览器可以将其呈现到 SPA 中。我想在此回复中添加 headers，但不知道如何添加。我发现最接近的是这里的讨论：

这听起来像是重复的，但在查看了类似的问题后，我找到了如何将 header 添加到我使用 HTTP 显式生成的响应中 object 来自 HttpModule，但不是如何将 header 附加到 Angular 创建 out-of-the-box 的响应。我喜欢使用类似 HTTP 拦截器的东西，它只是将 headers 附加到我的应用程序发出的每个响应，但看起来 Angular2 在 4.1 版之前不会有拦截器。

编辑：我尝试过的事情：

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

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

Answer 1

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

然后你需要创建一个自定义的Http服务（扩展angular自己的Http服务）或者XHRBackend。它可以访问请求和响应 object 并可以在那里添加额外的 headers。

Answer 2

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

出于开发目的，您应该能够配置 webpack-dev-server 以添加自定义 headers，方法是根据 documentation.

devServer.headers

Adds headers to all requests:
headers: {
  "X-Custom-Foo": "bar"
}

例如：

webpack.config.js

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

虽然实际上读取 Angular 应用程序中的 "initial load" headers 一旦它初始化（如果那是你正在寻找的做）您可能需要将您的值添加为 [non-httpOnly] cookie，然后在 ngInit().

上阅读它们

来源：DevServer Documentation - Header

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

Angular2 - How can I add HTTP headers to responses my app sends to the browser?

http-headers

angular4

angular