title: Angular 4: unable to read headers from response - not a CORS issue
body: <p>In the context of a server automatically renewing a token, I'm struggling with the basics: Obtaining header data from a response.</p>
  <p>It does not seem to be CORS related as my Node/express allwos the Authorization/x-access-token and reponds accordingly (see network tab screeencap below).</p>
  <p>The first step I want to see working is simply reading the header from the response. See my code, it's boilerplate as found in the docs. Event getting &quot;Content-Length&quot; returns null.</p>
  <p><strong>auth-service.ts</strong></p>
  <pre><code>login(username:string, password:string):Observable&lt;boolean&gt;{
      this.loggedIn = false;
      return new Observable( (observer:Observer&lt;boolean&gt;) =&gt; {
  
        const body = {user: username, pwd: password};
        const url = this.config.API_ENDPOINT_PUBLIC_AUTH;
  
        this.httpClient.post(url, body, {
          responseType: 'text',
          observe: &quot;response&quot;
        }).first().subscribe(
          (response:HttpResponse&lt;string&gt;) =&gt; {
  
            // DEBUG
            console.log(response.headers.get('Authorization'));
            console.log(response.headers.get('X-Test-Header'));
            console.log(response.headers.get('Content-length'));
  
  
            this.token = response.headers.get('Authorization');
            this.storeToken(this.token);
            this.currentUser = username;
            this.loggedIn = true;
            this.authChanged$.next('auth');
            observer.next(true);
          },
          (err) =&gt; observer.next(false),
          () =&gt; {},
        );
      });
    }
  </code></pre>
  <p>Console output:</p>
  <blockquote>
  <p>null</p>
  <p>null</p>
  <p>null</p>
  </blockquote>
  <p>Compare this to the contents of my network tab for this request:</p>
  <p><a href="https://i.stack.imgur.com/RbBin.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RbBin.png" alt="enter image description here" /></a></p>
  <p>Needless to say my HttpInterceptor doesn't work either - upon being provided &quot;Authorization&quot; header in a response, it uses the value as new token. This to implement auto-renewal of tokens:</p>
  <p><strong>token.interceptor.ts</strong></p>
  <pre><code>  intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      const authService = this.injector.get(AuthService);
      const token = authService.getToken();
  
      if(token){
        request = request.clone({
          setHeaders: { 'x-access-token' : token }
        });
      }
      
      return next.handle(request).do(
        (event: HttpEvent&lt;any&gt;) =&gt; {
          if (event instanceof HttpResponse) {
            const response:HttpResponse&lt;any&gt; = (&lt;HttpResponse&lt;any&gt;&gt; event);
            const authorizationHeader = response.headers.get('Authorization');
            console.log('Authorization header value: ' + authorizationHeader);
            if(authorizationHeader){
              authService.setToken(authorizationHeader);
            }
          }
        },
        (err: any) =&gt; {
        if (err instanceof HttpErrorResponse){
          if (err.status === 401) {
            this.router.navigate(['/']);
          }
        }
      });
    }
  </code></pre>