Angular Http Interceptor list Response headers

Question

The following code does not log custom headers from the server. Am I missing something - the only headers written out are content-type and content-length.

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoaderService } from './loader.service';
import { AuthService } from './services/auth-service';
import * as _ from 'lodash';
import { tap } from 'rxjs/internal/operators/tap';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
    constructor(public loaderService: LoaderService,
        private authService: AuthService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.loaderService.show();

        if (!_.isNil(this.authService.authenticatedUser) && this.authService.authenticatedUser.token) {
            request = request.clone({
                setHeaders: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${this.authService.authenticatedUser.token}`
                }
            });
        }

        return next.handle(request).pipe(tap((resp: HttpResponse<any>) => {

            if (resp instanceof HttpResponse) {
                for (const h of resp.headers.keys()) {
                    console.log('header', h);
                }
            }
        },
        (resp: any) => {

            if (resp instanceof HttpErrorResponse) {

                if (resp.status !== 401) {
                    return;
                }
                this.loaderService.setUnAuthorized();
            }
        }, () =>  { this.loaderService.hide();  }));
    }

}

Have you exposed the custom headers from server using access-control-expose-headers? because not all headers are allowed to be accessed from the client side — Rachid O
– Rachid O, Commented Jun 5, 2020 at 4:04

Rachid O · Accepted Answer · 2020-06-05 11:19:30Z

2

The Access-Control-Expose-Headers response header indicates which headers can be exposed as part of the response by listing their names.

By default, only the 7 CORS-safelisted response headers are exposed:

Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma

If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.

Access-Control-Expose-Headers: *

for instance with ngnix it would be:

add_header 'Access-Control-Expose-Headers' '*';

answered Jun 5, 2020 at 11:19

Rachid O

14.3k16 gold badges73 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KnowHoper · Accepted Answer · 2020-06-07 11:30:09Z

2

My server implementation is in DotNet, so the following using the principle above worked:

 string[] headers = new string[] {"X-Custom-1", "X-Custom-2"};

        services.AddCors(options =>
        {
            options.AddPolicy("AllowAll", builder =>
            {
                builder.AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowAnyOrigin()
                    .WithExposedHeaders(headers); 
            });
        });

edited Jun 7, 2020 at 11:30

answered Jun 6, 2020 at 10:23

KnowHoper

4,6724 gold badges45 silver badges60 bronze badges

Collectives™ on Stack Overflow

Angular Http Interceptor list Response headers

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related