angular2/http get location header of 201 response

Question

I finished successfully the angular2 \"tour of heroes\" starter tutorial. Then I build an api based on symfony3, FosRestBundle and BazingaHateoasBundle as backend. Now nearl

Answer 1

You should use the flatMap operator instead of the map one:

return this._http.post(this._heroesUrl, body, options)
        .flatMap((res:Response) => {
          var location = res.headers.get('Location');
          return this._http.get(location);
        }).map((res:Response) => res.json()))
        .catch(this.handleError)

Edit

Regarding your header problem.

I think that your problem is related to CORS. I think that the preflighted request should return the headers to authorize in the Access-Control-Allow-Headers in its response. Something like that:

Access-Control-Allow-Headers:location

If you have the hand on the server side of the call, you could update this header with the headers you want to use on the client side (in your caseLocation`).

I debugged the request and specially within the XhrBackend class that actually executes the request and gets the response from the XHR object. The header isn't returned by the code: _xhr.getAllResponseHeaders(). In my case, I only have the Content-Type one.

See this link: https://github.com/angular/angular/blob/master/modules/angular2/src/http/backends/xhr_backend.ts#L42.

From the following question:

Cross-Origin Resource Sharing specification filters the headers that are exposed by getResponseHeader() for non same-origin requests. And that specification forbids access to any response header field other except the simple response header fields (i.e. Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, and Pragma):

See this question for more details:

• Restrictions of XMLHttpRequest's getResponseHeader()?

Answer 2

My fault!

after reading https://github.com/angular/angular/issues/5237 and http://www.aaron-powell.com/posts/2013-11-28-accessing-location-header-in-cors-response.html, I recognize that there must be something wrong with my CORS configuration of the NelmioCorsBundle (https://github.com/nelmio/NelmioCorsBundle/issues/9). As a quick&dirty fix I added expose_headers: ['Origin','Accept','Content-Type', 'Location'] to the symfony configuration: Before:

nelmio_cors:
    paths:
        '^/api/':
            allow_credentials: true
            origin_regex: true
            allow_origin: ['*']
            allow_headers: ['Origin','Accept','Content-Type', 'Location']
            allow_methods: ['POST','GET','DELETE','PUT','OPTIONS']
            max_age: 3600

After:

nelmio_cors:
    paths:
        '^/api/':
            allow_credentials: true
            origin_regex: true
            allow_origin: ['*']
            allow_headers: ['Origin','Accept','Content-Type', 'Location']
            allow_methods: ['POST','GET','DELETE','PUT','OPTIONS']
            expose_headers: ['Origin','Accept','Content-Type', 'Location']
            max_age: 3600

And now it works like a charm.

So it is not an angular issue and was never really solvable. Sorry! I will keep this for everyone who stumbled over a similar CORS problem.

Many thanks to all who contributed