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

unable to successfully complete parameter in angular 2

After receiving data from the API, I am using the subscribe method to execute lines of code. Below is the code snippet: this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM')).subscribe( resp => { this.ag ...

Encountering an obscure issue when using Discord.js v14 after attempting to cancel and resubmit a modal

I'm currently working on a Discord bot using modals in Discord.js v14. These modals appear after the user clicks a button, and an .awaitModalSubmit() collector is triggered to handle one modal submission interaction by applying certain logic. The .awa ...

What is the overlay feature in Material-UI dialogs?

I recently started using the React-Redux Material-UI package found at http://www.material-ui.com/#/components/dialog My goal is to implement a grey overlay that blankets the entire dialog element, complete with a circular loading indicator after the user ...

Error in Angular 12: Unable to access 'bootstrap' property from null

During the upgrade process of my Angular 10 application to Angular 12, I encountered an error that says: TypeError: Cannot read property 'bootstrap' of null Below are the files related to my Angular setup: tsconfig.json { "compileOnSave& ...

Utilizing Dialogflow's Conv.Data or Conv.User.Storage for a Basic Counter System

I am interested in developing a simple counter within a conversation using a Firebase function with Actions for Google. The documentation suggests the following: app.intent('Default Welcome Intent', conv => { conv.data.someProperty = &apo ...

Having Trouble with Building After Fork and NPM Installation on GitHub

https://github.com/czeckd/angular-dual-listbox Discovering a Github repository that caught my attention, I decided to incorporate it into my Angular 5 application. However, after noticing certain styles and functionality that needed modification or additi ...

Optimal Angular Project Structure for Creating an App with Admin Backend

After finishing "ng-book: The complete book on Angular 6," I am diving into Angular as a newcomer. As I venture into building my application, I have a specific question that has been lingering in my mind. The vision for my project includes: MainLayout: ...

Adjust the height of a div vertically in Angular 2+

Recently, I started using angular2 and I've been attempting to create a vertically resizable div without success. I have experimented with a directive for this purpose. Below is the code for my directive: import { Directive, HostListener, ElementRef ...

Angular 4 after ejection, coupled with automated end-to-end testing using Protractor/Selenium setup

I am attempting to conduct end-to-end tests using Protractor/Selenium on an Angular 4 project that has been ejected. Here is my package.json: ... "scripts": { "pree2e": "webdriver-manager update --standalone false --gecko false --quiet node", "e2 ...

Error Encountered While Uploading to Firebase Functions: HTTP Error: 400, Mysterious Issue Un

Whilst attempting to deploy the server side of my Angular Universal SSR app to Firebase Functions, I encountered an issue with the error message Upload Error: HTTP Error: 400, Unknown Error. My understanding is that this error commonly occurs when deployi ...

Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

Here's the scenario: I have a simple question regarding an Angular component. Inside this component, there is a function structured like this: somethingCollection: TypeSomething[] ... public deleteSomething(something: TypeSomething): void { // so ...

Checking at compile time whether a TypeScript interface contains one or multiple properties

Is there a way to determine if a typescript interface contains at least one property at compile time without knowing the property names? For example, with the interfaces Cat and Dog defined as follows: export type Cat = {}; export type Dog = { barking: bo ...

Incorporating Paypal subscription functionality and refining subscription challenges

The angular project I'm working on requires configuring a PayPal payment gateway for create subscription, cancel subscription, and upgrade subscription functionalities. I have encountered two issues with PayPal: 1) The PayPal button has been success ...

Transferring information from child to parent class in TypeScript

I have a scenario where I have two classes (Model). Can I access properties defined in the child class from the parent class? Parent Class: class Model{ constructor() { //I need the table name here. which is defined in child. } publ ...

Forward user to a subdomain once they have successfully logged in on an Angular 2 application

I've been working on an Angular 2 application and I'm looking to redirect users from www.example.com to admin.example.com after they successfully log in. What is the best way to accomplish this using Angular 2? Additionally, how can I test this f ...

Changing the mouse cursor dynamically with Angular programming

What is the recommended approach for changing the mouse cursor programmatically in Angular? For instance: HTML: <div [style.cursor]="cursorStyle">Content goes here</div> or <div [ngStyle]="{ 'cursor': cursorStyle ...

The operation failed with a TypeError because the object does not allow the addition of the newField property

I encountered an error that says: TypeError: Cannot add property newField, object is not extensible Whenever I try to add a new key or change a value, it doesn't work and I'm not sure what the issue is. dynamicFilter; public ionViewWillEnte ...

Error in React-Typescript: The element type 'Component' is missing any construction or call signatures

I recently wrote a higher order component using React withContext: import React from 'react'; import permissionContext from 'context'; interface Props { Component: () => React.Component; } const withContext: React.FC<Props> ...

Utilizing absolute path in Typescript: A comprehensive guide

I am currently working on a project written in Typescript running on NodeJS. Within the project, I have been using relative paths to import modules, but as the project grows, this approach is becoming messy. Therefore, I am looking to convert these relativ ...

Splitting files with Webpack generates dynamic chunk files

Anticipating to only have two distinct chunks named vendors and commons, webpack unexpectedly generates a new chunk file for specific entries with a delimiter. optimization: { splitChunks: { chunks: 'all', cacheGroups: { ...