Read custom headers in angular2

Question

I have created .NET Core WebAPI and in each request I add custom header into response.

context.Response.Headers.Add("X-Access-Token", newToken);

I also enbaled cors in server side:

app.UseCors(config =>   config.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin());

Every request in Augular2 side I am filtering and trying to get the "X-Access-Token" header but that returns null.

 getVehiclesReport(dateFrom: Date, dateTo: Date, loaderName): Observable<IVehiclesReport> {
            return this.http.get(this.baseUrl + "report/vehicles/" + this.getQueryDate(dateFrom) + "/" + this.getQueryDate(dateTo), this.jsonHeadersAuth)
            .map((response: Response) => this.mapResponse(response, response =><IVehiclesReport>response.json()))
            .catch(this.handleError)
            .finally(() => this.ajaxService.push(loaderName));
    }


 protected mapResponse<TResult>(response: Response, func : Func<Response, TResult>): TResult {
        let token = response.headers.get("X-Access-Token");
        //returns null

        if(token && token != null && token != ''){
            this.localStorageService.setJwtToken(token);
        }

        return func(response);
    }

However I can see my X-Access-Token in Developer Options / Network / Response Headers.

Did somone faced that issue?

Can we see the block of code from response below? Is the type or response an angular http? — Chris, Mar 01 '18 at 12:57
@MurliPrajapati no its request from angular and I am using Http class built in angular2 — miechooy, Mar 01 '18 at 12:58
@Chris response is instance of Response class from @angular/http — miechooy, Mar 01 '18 at 12:58
We need more information here, response has to be scoped to within your "filter" I assume? Can you update your question to contain the full code snippet doing the work? If you can see the token in dev tools, then its on the angular side. — Chris, Mar 01 '18 at 13:01
are you getting `response` in `mapResponse` method? I mean is it null or just headers are null. — Murli Prajapati, Mar 01 '18 at 13:13
Can you see `Access-Control-Allow-Headers : *` header in the networks tab? — David, Mar 01 '18 at 13:17
I couldn't find the string values of header, but if you do this: let token = response.header.toJSON(); console.log(token); it should return a string of all headers, I would ensure the "X-Access-Token" is correct and it isn't something like "x-access-token" you can also do .keys() to get a list of keys. — Chris, Mar 01 '18 at 13:18
look at this answer:https://stackoverflow.com/a/48957319/5271656 — Murli Prajapati, Mar 01 '18 at 13:18
@miechooy Can you modify your backend to explicitly expose the header X-Access-Token, instead of using wilcard * ? — David, Mar 01 '18 at 13:20

score 0 · Answer 1 · answered Mar 01 '18 at 13:26

0

Thank you everyone I just figured out. When I add my custom header I also need to add "Access-Control-Expose-Headers".

Soultion:

context.Response.Headers.Add("X-Access-Token", newToken);
            context.Response.Headers.Add("Access-Control-Expose-Headers", "X-Access-Token");

answered Mar 01 '18 at 13:26

miechooy

3,178
12
34
59

Glad you got it working, please mark David as the answer king! – Chris Mar 01 '18 at 13:29

Read custom headers in angular2

1 Answers1