The Authorization header in Angular's HTTPResponse is empty

When attempting to retrieve the authentication token from the login response, I found that the value is null and suspect that only the Content-Type attribute is not null...

Login method

login(credentials: any): Observable<any> {
    return this.http.post(AUTH_API + '/login', {
      username: credentials.username, 
      password: credentials.password
    }, {observe: 'response'});
  }
this.authService.login(this.loginForm.value)
      .subscribe((res:Response) => {
        console.log(res.headers.get('Authorization'));
    },
    err => {
      this.isLoginError = true;
      this.loginErrorMessage = err.error;
    });

https://i.sstatic.net/d8xDD.png

EDIT:

I made an update by including Access-Control-Expose-Headers in my backend response and it resolved the issue.

response.setHeader("Access-Control-Expose-Headers", "Authorization");
            response.addHeader("Authorization", jwtTokenProvider.generateToken(auth));

Answer №1

You may need to include "Access-Control-Expose-Headers" in the response headers on your server side.

Referencing: Issue with Angular 5 HTTP Client missing "Authorization" from Response header

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sharing interfaces and classes between frontend (Angular) and backend development in TypeScript

In my current project, I have a monorepo consisting of a Frontend (Angular) and a Backend (built with NestJS, which is based on NodeJS). I am looking to implement custom interfaces and classes for both the frontend and backend. For example, creating DTOs s ...

Expanding the Window Object in Typescript with Next.js Version 13

Within my Next.js 13 project, I am looking to enhance the Window object by adding a property called gtag I created an index.d.ts file in the root folder with the following content: index.d.ts declare module '*.svg' { const content: any; exp ...

Move up to the next level with Angular2 Bootstrap Pagination

I recently encountered an issue with the Angular2 bootstrap module. Interestingly, I was using the same module across different pages. However, when I decided to move the module to a higher level, the following error popped up: ERROR Error: Uncaught (in ...

Ways to utilize multiple tsconfig files within VS Code

My project structure in Visual Studio Code is fairly common with a client, server, and shared directory setup: ├── client/ │ ├── tsconfig.json ├── shared/ ├── server/ │ ├── tsconfig.json ├── project.json The tw ...

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

Within a simple loop, I have created a list with multiple rows. When a row is clicked or hovered over, it becomes active. Subsequently, clicking on another row will deactivate the previous one and activate the new one. So far, everything is functioning c ...

Why does the Amazon DynamoDB scan trigger an error by making two HTTP requests to the server?

My TypeScript React application is using DynamoDB services to store data, with a JavaScript middleware handling the database access operations. While developing locally, I successfully implemented the scan, put, and delete operations with no errors. Howeve ...

How to prevent right-clicking on an entire website using Angular, not just specific pages

I have been searching for a solution to disable right-click on my entire Angular 2+ application, but all I can find are solutions that only work for specific components such as, <someSelector appDisableRightClick></someSelector> Where "someSel ...

JavaScript: Organizing values based on their case sensitivity

Imagine a scenario where we have models ABC23x, ABC23X & abc23X all referring to the same model. These model names are retrieved from API endpoints. Now the UI has two tasks: Display only one model name (ABC23X) When calling the REST API, we need to sen ...

Exploring matching routes with Next.js + Jest

Issue with Unit Testing MenuItem Component Despite my efforts to achieve 100% coverage in my component unit tests, I have encountered an uncovered branch specifically within the MenuItem component. To offer more insight, here is the parent component that ...

In Certain Circumstances, Redirects Are Applicable

I have set up Private Routing in my project. With this configuration, if there is a token stored in the localStorage, users can access private routes. If not, they will be redirected to the /404 page: const token = localStorage.getItem('token'); ...

Encountering difficulty when trying to define the onComplete function in Conf.ts. A type error is occurring, stating that '(passed: any) => void' is not compatible with type '() => void'.ts(2322)'

I have been developing a custom Protractor - browserstack framework from the ground up. While implementing the onComplete function as outlined on the official site in conf.ts - // Code snippet to update test status on BrowserStack based on test assertion ...

The 'subscribe' property is not found in the type 'OperatorFunction<Response, Recipe[]>'

I'm encountering an issue while attempting to retrieve data from firebase "Property 'subscribe' does not exist on type 'OperatorFunction'" Any suggestions on what might be missing here? import { Injectable } from '@angula ...

Properly capturing an item within a TypeScript catch statement

I am dealing with a scenario where my function might throw an object as an error in TypeScript. The challenge is that the object being thrown is not of type Error. How can I effectively handle this situation? For example: function throwsSomeError() { th ...

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization

In my Angular setup, there is a component that tracks changes in its route parameters. Whenever the params change, it extracts the ID and triggers a function to fetch the corresponding record using a promise. Once the promise resolves, the component update ...

The Google Chrome console is failing to display the accurate line numbers for JavaScript errors

Currently, I find myself grappling with debugging in an angular project built with ionic framework. Utilizing ion-router-outlet, I attempt to troubleshoot using the Google Chrome console. Unfortunately, the console is displaying inaccurate line numbers mak ...

What should be transmitted to the front-end following the successful validation of a token on the server?

My process starts with a login page and then moves to the profile page. When it comes to handling the token on the backend, I use the following code: app.use(verifyToken); function verifyToken(req, res, next) { if (req.path === '/auth/google&ap ...

Utilizing lazy loading in Angular with 2 modules that require sharing the same service

Custom Module Integration: export class CustomModule { static forRoot(): ModuleWithProviders { return { ngModule: CustomModule, providers: [ MyService ] }; } } Dynamic Module #1: @NgModule({ imports: [ CommonM ...

Solutions for Utilizing Generic Mixins in Typescript

As a newcomer to Typescript, I have encountered an issue with mixins and generics. The problem became apparent when working on the following example: (Edit: I have incorporated Titian's answer into approach 2 and included setValue() to better showcas ...

Creating a type-safe dictionary for custom theme styles in Base Web

In my Next.js project, I decided to use the Base Web UI component framework. To customize the colors, I extended the Theme object following the guidelines provided at . Interestingly, the documentation refers to the theme type as ThemeT, but in practice, i ...

Why is it that TypeScript does not issue any complaints concerning specific variables which are undefined?

I have the following example: class Relative { constructor(public fullName : string) { } greet() { return "Hello, my name is " + fullName; } } let relative : Relative = new Relative("John"); console.log(relative.greet()); Under certain circum ...