Angular2 - アプリがブラウザに送信する応答にHTTPヘッダーを追加するにはどうすればよいですか？

Question

私は職場でAngular2アプリのプロトタイプを作成しています。このアプリは、角度2のアプリケーションからの応答にいくつかのリンクヘッダーが必要ないくつかの会社のミドルウェアの下で実行する必要があります。残念ながら、Angularがすぐに提供する応答にヘッダーを追加する方法を理解できませんでした。

GETリクエストをAngularアプリに直接送信すると、ブラウザがSPAにレンダリングできるテキスト/ HTML応答が返されます。私はこの応答にヘッダーを追加したいと思いますし、どのように把握することはできません。私はからのHTTPオブジェクトに明示的にを生成Angular2 - set headers for every request

これは重複のように聞こえるが、同様の質問に目を通したが、私は応答にヘッダを追加する方法を見つけた：私が見つけた最も近いが、ここでの議論でありますHttpModuleではなく、AngularがOut-of-the-Boxを作成するレスポンスにヘッダーを添付する方法ではありません。私は、アプリケーションが送信するすべての応答にヘッダーを添付するHTTPインターセプタのようなものを使用したいと思いますが、Angular2はリリース4.1までインターセプタを持つようには見えません。

編集：物事は私が試してみた：

• これは私から受け取るすべての応答にヘッダを追加した応答
  • にヘッダを追加し、私の（メイン）AppModuleでHTTP ResponseOptionsのプロバイダを追加します私のアプリケーションがHttpModuleから受け取ったHTTP要求は、私のアプリケーション自身が外部のサービスに送る応答にヘッダを追加しません。

編集2：私は私の角度アプリが終了する場所を誤解し、サーバホスティング、それが開始されます。このようなヘッダーをサーバーに追加することができます。私の簡単な例では、webpack-dev-serverを構成する必要がありました。下記の回答をご覧ください。

Answer 1

Webスターターパックは、ちょうどあなたの努力のための開発ホスティングプラットフォーム/ Webサーバーとしてwebpack-dev-serverを使用していますが、それはさん。 Apache、IISなどの他の強化されたWebサーバソフトウェアからAngularアプリケーションを提供します。

開発のために、webpack.config.jsを変更してwebpack-dev-serverを設定してカスタムヘッダを追加できるようにする必要があります。 headers個のオプションをdocumentationに設定します。

devServer。ヘッダ

は、すべての要求にヘッダを追加します：

例えば

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

：

webpack.config.js

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

を実際にに "読みが初期ロード "ヘッダー（それがあなたが探しているものなら）あなたの角度アプリケーションの中で、あなたはあなたの値を[-http0nly]のクッキーとして追加し、次にそれらをngInit()で読む必要があるかもしれません。

出典：DevServer Documentation - Header

Answer 2

私はangular2-webpack-starterについてよくわかりませんが、Angularアプリケーションを簡単に開発できるコマンドラインツールだと思います。そのため、JavaScript、HTML、およびアセットだけが提供されます。アプリケーション自体ではありません。 Angularアプリケーションは、ブラウザで動作し、バックエンドのクライアントとして機能します。したがって、バックエンドアプリケーションを提供する別のサーバが必要であり、すべてのXHRコールがこのバックエンドに送られます。アプリケーションをデプロイすると、angular2-webpack-startterではなく、Apache HTTPDやnginxなどのより高度なHTTPサーバーで実行される可能性があります。

次に、独自のHttpサービス（独自のHttpサービスを拡張）またはXHRBackendを作成する必要があります。これはRequestオブジェクトとResponseオブジェクトにアクセスでき、余分なヘッダーを追加できます。 、最終的には、ない適切な最終的な角度アプリの一部を