1

I'm prototyping an Angular2 app at work. The app should run under some company middleware that expects several Link headers in responses it gets from the angular2 app. Unfortunately, I haven't been able to figure out how to add headers to responses that Angular provides out of the box.

To clarify what I mean - when I send a GET Request directly to my Angular app, it sends back a Text/HTML response that a browser can render into an SPA. I would like to add headers to this response, and can't figure out how. The closest I've found is the discussion here: Angular2 - set headers for every request

This sounds like a duplicate, but having looked through similar questions, I've found how to add headers to Responses I generate explicitly with an HTTP object from the HttpModule, but not how to attach headers to the Responses that Angular creates out-of-the-box. I'd love to use something like an HTTP Interceptor that just attaches headers to every response my app sends out, but it doesn't look like Angular2 will have interceptors until release 4.1.

Edit: Things I've tried:

  • Adding a provider for Http ResponseOptions in my (main) AppModule that adds headers to responses
    • This adds the header to all responses I receive from http requests that my app receives from the HttpModule, but doesn't add the header to responses that my app itself sends to outside services.

Edit 2: I misunderstood where my Angular app ends and where the server hosting it begins. Headers like this can be added in the server - for my simple example, I needed to configure the webpack-dev-server. See the accepted answer below.

Community
  • 1
  • 1
Alex Pruss
  • 533
  • 5
  • 15
  • 1
    I'm puzzled by your description - Angular application usually send requests and receive responses. You write your Angular application has a role of a server. – Ján Halaša Mar 29 '17 at 13:30
  • @SteveG. I'm working with the https://github.com/AngularClass/angular2-webpack-starter at the moment. Per default, the starter hosts an app at localhost:3000. Sending a GET request to localhost:3000 will return a bunch of HTML, as well as a few headers - Accept-Ranges, Access-ControlAllow-Origin, etc. I would like to add my own custom header/value pairs to these headers. – Alex Pruss Mar 29 '17 at 13:31
  • @JánHalaša At might well be that this isn't something that Angular supports, I'm completely new to the framework and am unsure if I'm using it correctly. – Alex Pruss Mar 29 '17 at 13:33
  • @SteveG. That would be how I could add a header to a request I make from inside the app using _http. I want to instead a header to requests made *to* the app. `curl -s -D - localhost:3000` This returns the text/HTML of the landing site of the application, as well as a bunch of headers. I would like to add my own header here. – Alex Pruss Mar 29 '17 at 14:14
  • 1
    So you're sending a GET Request to the development *Web Server* `localhost:3000` (not your Angular app) and you want the development *Web Server* to send your additional headers? (This may be where the confusion lies: Web Starter Pack uses webpack-dev-server just as a development hosting platform/server for your efforts, but it 's not, in the end, part of your final Angular app). – Steve Mar 29 '17 at 14:32
  • 1
    Aha! That was in fact what I was misunderstanding. By configuring the dev server, I can get the functionality I need! What exactly constitutes the app and what the server it's deployed on is something I'll figure out in a day or two once I try to deploy this prototype. – Alex Pruss Mar 29 '17 at 14:37

2 Answers2

1

I don't know the angular2-webpack-starter, but I guess it's just a command line tool easy development of your Angular application. So it just serves your JavaScript, HTML and assets. It's not the application itself. The Angular application runs in a browser and serves as a client of your backend. So you need another server that serves your backend application and all your XHR calls will go to this backend. When you deploy your application, it will probably not run in the angular2-webpack-starter, but in some more advanced HTTP server such as Apache HTTPD or nginx.

Then you need to create a custom Http service (extending angular's own Http service) or XHRBackend. It has access to Request and Response object and can add extra headers there.

Ján Halaša
  • 8,167
  • 1
  • 36
  • 36
1

Web Starter Pack uses webpack-dev-server just as a development hosting platform/Web server for your efforts, but it 's not, in the end, part of your final Angular app proper. You'll eventually serve your Angular app from some other hardened Web server software such as Apache, IIS, etc.

For development purposes, you should be able to configure webpack-dev-server to add custom headers by modifying your webpack.config.js by setting the headers options, per the documentation.

devServer.headers

Adds headers to all requests:

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

For example:

webpack.config.js

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

Although to actually read the "initial load" headers within your Angular application once it initializes (if that is what you're looking to do) you may need to add your values as [non-httpOnly] cookies, then read them on ngInit().

Source: DevServer Documentation - Header

Steve
  • 11,596
  • 7
  • 39
  • 53