angular http fails to verify authorization header

My backend is set up in Node.js with Express and Sequelize. When I make a request to retrieve all my product types using Postman, everything works fine as shown in this image:

postman http request and header

However, when I try to make the same request from my Angular frontend, I encounter an error.

header Authorization is missing

This is the Angular service's HTTP request code:

 getTypes(token:any):Observable<any>{
    let headers = new HttpHeaders().set('Content-Type', 'application/json')
                                   .set('Authorization', token);
    console.log(headers)
    return this._http.post(this.url + 'productType/getall', {headers:headers});
    
  }

Here is the header being sent to my Postman backend:

{
  authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
  'user-agent': 'PostmanRuntime/7.28.3',
  accept: '*/*',
  ...
}

And here is the header being sent from my Angular frontend:

{                                                                                                                       
  host: 'localhost:3002',                                                                                               
  connection: 'keep-alive',                                                                                             
  ...                                                                                                                       
}                                                                                                                        

I'm not sure why the authorization token is not being included in the Angular request, even though the token is not null.

angular consol with the token and the error

Answer №1

Your parameters for HttpClient's post method are not in the correct order.

post(url: string, body: any, options: { headers?: HttpHeaders....

The second parameter should be the body of the post, while the third parameter should be the options with headers.

Alternatively, if you are looking to use the get method, then you can keep your parameters as they are.

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

Infragistics: A guide to displaying numerous ignite Snackbar instances with unique identifiers

I am trying to display multiple Snackbars on my Angular website. I'm utilizing Ignite UI for Angular and incorporating the Snackbar feature from Ignite. <igx-snackbar id="snackbar1" [displayTime]="displayTime"> <div [cla ...

What is the Angular2 equivalent of the AngularJS $routeChangeStart event?

During our time working with AngularJS, we utilized the $routeChangeStart/End event in the $rootScope to monitor changes in the route object. What is the equivalent method for monitoring route changes in Angular2? How can we achieve the same functionality ...

When the Mat tab is clicked, the Expand Collapse feature associated with it will be displayed

Currently, I am implementing Mat tabs (vertical) in one component and Mat expand/collapse functionality in another component. Upon clicking on a tab, the corresponding Mat expand should be displayed. You can view the progress of my work on this Stackblitz ...

Angular version 2 has a directive called "ng2-nvd3" which seems to be undefined

I am attempting to incorporate a graph similar to the one shown in this Plunker example: Plunker Here is the corresponding code hosted on GitHub: GitHub However, I encountered an error: Uncaught (in promise): Unexpected directive value 'undefined ...

What are the best methods for implementing runtime type checking in JavaScript?

Utilizing either TypeScript or Facebook's Flow (type), I am empowered to statically assign types to variables like this: function add (x: integer, y: integer) { ... } Both TypeScript and Flow are able to identify and prevent incorrect invocations su ...

Creating an Angular 7 Template using HTML CSS and Javascript

I recently acquired a template that comes with HTML, CSS, and Javascript files for a static webpage. My goal is to integrate these existing files into my Angular project so I can link it with a Nodejs application to create a full-stack webpage with backend ...

How can Angular 6 automatically detect changes in angular2-cli app files and run build files on the browser simultaneously?

I have an angular2-cli app and I want the build files to automatically detect changes when I view them in a browser. How can I achieve this? I tried using the following command: ng build --prod --build-optimizer --watch Once the build files are crea ...

Errors related to Typescript are causing issues with the stock installation of Next.js

Whenever I use typescript with create-next-app, my tsx files are filled with numerous "Problems" messages. These errors only appear in Visual Studio Code and do not affect the build process. I have tried uninstalling vscode, removing all extensions, and ...

Tips for Ensuring the Observable Completes Before Subscribing

I utilized RXJS operators in my code to retrieve an array of locations. Here is the code snippet: return O$ = this.db.list(`UserPlaces/${this.authData.auth.auth.currentUser.uid}`, { query: { orderByChild: 'deleted', equalTo: fal ...

No invocation of 'invokeMiddleware' was suggested

Encountered this specific issue when setting up loopback4 authentication. constructor ( // ---- INSERT THIS LINE ------ @inject(AuthenticationBindings.AUTH_ACTION) protected authenticateRequest: AuthenticateFn, ) { super(authen ...

Implementing Angular 4 on a Node Express server within Firebase platform

After setting up an angular 4 project using angular cli, I decided to incorporate express into my application. I created a file named app.js with the following content: app.js const express = require('express') const app = express() ...

Module not found

Hey everyone, I recently updated my project to node version v14.18.0, but now I'm encountering a "module not found" issue (see screenshot below). Any suggestions on how to resolve this? https://i.stack.imgur.com/k0u82.png ...

`Inconsistent copying behavior across Chrome and Mozilla browsers for TypeScript`

I am facing an issue with copying the content of a textarea component to the clipboard. I have noticed that there are two different outcomes when running the code on Mozilla browser and Chrome: Below is my TypeScript code: 'HTML': <button ( ...

Displaying text and concealing image when hovering over a column in an angular2 table

I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the im ...

Ways to selectively deactivate client-side functionality

I have implemented a server-side rendered app with transitions, including a 404 error page that I placed in a lazy module to avoid increasing the size of loaded JavaScript. While this setup is functioning correctly, there is some flickering when the clien ...

Stop accidental form submissions on iOS devices by disabling the return button

In my Ionic 3 application running on iOS, I encountered a bug that allows users to submit a form even when the submit button is disabled. Despite trying different solutions from this source, I have not been successful in resolving it. To prevent accidenta ...

How can I display 4 react components, such as custom buttons, in a manner that ensures the most recently pressed button appears on top?

I've been attempting to solve this problem, but I'm struggling to find a solution. My current approach involves grouping the 4 button components in an array and shifting their positions based on user input. Is there a more efficient way to accomp ...

What is the best way to enhance @Query() dto with unfamiliar properties?

I have successfully created a table with pagination loading similar to the example provided in this tutorial. In my get controller function, I am currently utilizing @Query() pageOptionsDto: PageOptionsDto<PlayerSortColumn> as a parameter. This is t ...

Changing the type of value in a React select onChange

<Select options={options} value={selectedBusinessList} isMulti placeholder="Select Business" onChange={(value: any) => setSelectedBusinessList(value)} onInputChange={query => { if ...

Receiving an error in Typescript when passing an object dynamically to a React component

Encountering a typescript error while attempting to pass dynamic values to a React component: Error message: Property 'title' does not exist on type 'string'.ts(2339) import { useTranslation } from "react-i18next"; import ...