Question

我正在开发一个Angular2应用程序原型。该应用程序应该在某些公司中间件下运行，该中间件需要在angular2应用程序中获得的响应中有多个 Link 标头。不幸的是，我还没有弄清楚如何将标题添加到Angular提供的响应中。

澄清我的意思 - 当我直接向我的Angular应用程序发送GET请求时，它会发回一个文本/ HTML响应，浏览器可以将其呈现到SPA中。我想在此回复中添加标题，并且无法弄清楚如何。我发现的最接近的是这里的讨论：Angular2 - set headers for every request

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

编辑：我尝试过的事情：

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

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

Answer 1

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

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

Answer 2

Web Starter Pack使用webpack-dev-server作为开发托管平台/ Web服务器，但最终您的最终Angular应用程序。您最终将从其他一些强化的Web服务器软件（如Apache，IIS等）中为您的Angular应用程序提供服务。

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

<强> devServer.headers

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

例如：

<强> webpack.config.js

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

虽然在Angular应用程序初始化之后实际读取“初始加载”标题（如果这是你想要做的），你可能需要将你的值添加为[ >非httpOnly ] cookie，然后在ngInit()上阅读。

来源：DevServer Documentation - Header

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

2 个答案: