Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular2/http get location header of 201 response

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.

Here is my Hero Service:

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 => <Hero[]> res.json()._embedded.items)
            .do(data => console.log(data)) // eyeball results in the console
            .catch(this.handleError);
    }

    addHero(name:string):Observable<Hero> {

        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) => this._http.get(res.headers.get('Location')).map((res:Response) => 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 => {
                return res.json();
            })
            .do(data => console.log(data)) // eyeball results in the console
            .catch(this.handleError);
    }
}

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:

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

The problem is, that the res.headers.get('Location') didn't get the Location header from the response. After some debugging it seems to be that the res.headers just provides two headers Cache-Control and Content-Type. But no Location.

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.

Thank you in advance!

like image 702
skroczek Avatar asked Mar 29 '16 09:03

skroczek


People also ask

How do I get the response header location?

To check this Location in action go to Inspect Element -> Network check the response header for Location like below, Location is highlighted you can see.

What is Location header in HTTP response?

The Location response header indicates the URL to redirect a page to. It only provides a meaning when served with a 3xx (redirection) or 201 (created) status response.

What is Location header in REST API?

The Location response header's value is a URI that identifies a resource that may be of interest to the client. In response to the successful creation of a resource within a collection or store, a REST API must include the Location header to designate the URI of the newly created resource.

What is observe in HttpClient?

Observe Response HttpClient object allows accessing complete response, including headers. In the browser, response body is a JSON object, which can be copied to a typescript interface or class type. Response headers are key/value pairs. Consider the following code that accesses complete response object.


1 Answers

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()?
like image 83
Thierry Templier Avatar answered Oct 20 '22 15:10

Thierry Templier