title: angular2/http get location header of 201 response
body: <p>I finished successfully the angular2 "tour of heroes" starter tutorial. Then I build an api based on symfony3, FosRestBundle and BazingaHateoasBundle as backend.
  Now nearly everything works, but on creating new items I'm not able to get the "Location" header from the response to load the newly created Item.</p>
  
  <p>Here is my Hero Service:</p>
  
  <pre><code>import {Injectable} from "angular2/core";
  import {Hero} from "./hero";
  import {Http, Headers, RequestOptions, Response} from "angular2/http";
  import {Observable} from "rxjs/Observable";
  import "rxjs/Rx";
  
  @Injectable()
  export class HeroService {
  
      constructor(private _http:Http) {
      }
  
      private _apiUrl = 'http://tour-of-heros.loc/app_dev.php/api'; // Base URL
      private _heroesUrl = this._apiUrl + '/heroes';  // URL to the hero api
  
  
      getHeroes() {
          return this._http.get(this._heroesUrl)
              .map(res =&gt; &lt;Hero[]&gt; res.json()._embedded.items)
              .do(data =&gt; console.log(data)) // eyeball results in the console
              .catch(this.handleError);
      }
  
      addHero(name:string):Observable&lt;Hero&gt; {
  
          let body = JSON.stringify({name});
  
          let headers = new Headers({'Content-Type': 'application/json'});
          let options = new RequestOptions({headers: headers});
  
          return this._http.post(this._heroesUrl, body, options)
              // Hero is created, but unable to get URL from the Location header!
              .map((res:Response) =&gt; this._http.get(res.headers.get('Location')).map((res:Response) =&gt; res.json()))
              .catch(this.handleError)
  
      }
  
      private handleError(error:Response) {
          // in a real world app, we may send the error to some remote logging infrastructure
          // instead of just logging it to the console
          console.error(error);
          return Observable.throw(error.json().error || 'Server error');
      }
  
      getHero(id:number) {
          return this._http.get(this._heroesUrl + '/' + id)
              .map(res =&gt; {
                  return res.json();
              })
              .do(data =&gt; console.log(data)) // eyeball results in the console
              .catch(this.handleError);
      }
  }
  </code></pre>
  
  <p>So when I'm calling the addHero method, a new Hero is created and a 201 response is returned without a body, but with the Location header set:</p>
  
  <pre><code>Cache-Control: no-cache
  Connection: Keep-Alive
  Content-Length: 0
  Content-Type: application/json
  Date: Tue, 29 Mar 2016 09:24:42 GMT
  Keep-Alive: timeout=5, max=100
  Location: http://tour-of-heros.loc/app_dev.php/api/heroes/3
  Server: Apache/2.4.10 (Debian)
  X-Debug-Token: 06323e
  X-Debug-Token-Link: /app_dev.php/_profiler/06323e
  access-control-allow-credentials: true
  access-control-allow-origin: http://172.18.0.10:3000
  </code></pre>
  
  <p>The problem is, that the <code>res.headers.get('Location')</code> didn't get the Location header from the response.
  After some debugging it seems to be that the <code>res.headers</code> just provides two headers Cache-Control and Content-Type. But no Location.</p>
  
  <p>I knew it should be also possible to solve the problem by adding the newly created data to body of the response, but this is not really the way I want to solve this.</p>
  
  <p>Thank you in advance!</p>