Angular 4 post request encountering problem with HTTP header

registerUser(
    email: string,
    password: string,
    firstName: string,
    lastName: string,
): Observable<any> {
    const headers = new HttpHeaders()
        .set('Authorization', "Basic " + btoa(email + ":" + password + ":" + firstName + ":" + lastName));
    headers.set('X-LSM-AccessToken', environment.DomainApiKeyHeaderName+':'+environment.salt);
    headers.set(environment.DomainApiKeyHeaderName, environment.DomainApiKey);
    let body = JSON.parse(localStorage.getItem('currentUser'));
    return this.http.post(
        environment.Domain + '/api/v1/Authentication/register',
        body,
        { headers }
        )
        .map(data => {
            return data;
        });
}

Some headers are not being sent at the moment. Currently only sending the authorization header and skipping others.

Answer №1

HttpHeaders remains immutable, with its set() function generating a new Header value. It's crucial not to overlook the outcome. Adjust your code to

const headers = new HttpHeaders().set(...)
                                 .set(...)
                                 .set(...);

Alternatively,

let headers = new HttpHeaders();
headers = headers.set(...);
headers = headers.set(...);
headers = headers.set(...);

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

Formatting Time in Angular 2 Using Typescript

Upon reviewing my date source, I found the following: TimeR ="2017-02-17 19:50:11 UTC"; Within the HTML file, I implemented this code snippet <span class="text-lg">{{TimeR | date: 'hh:mm'}}</span> The current output displays the t ...

Can an application be developed with OAuth2 that is role-based?

I am working on developing an application that combines Angular frontend and Spring Boot backend with OAuth2 authentication. My main challenge is figuring out how to retrieve the user's roles on the frontend. I want to be able to display role-based c ...

Customize Bootstrap4 variables without making changes to the original source code

I have come across several articles recommending editing the _custom.scss file and recompiling Bootstrap. However, I am actually installing Bootstrap 4 via npm. Therefore, it wouldn't be ideal to modify the contents of Bootstrap in the node_modules fo ...

The type 'FirebaseAuth' cannot be assigned to type 'Auth'

Recently, after updating my project dependencies, I encountered the following error: ERROR in src/app/services/auth/auth.service.ts(19,5): error TS2322: Type 'FirebaseAuth' is not assignable to type 'Auth'. Types of property &a ...

What is the purpose of exporting both a class and a namespace under the same name?

While exploring some code, I came across a situation where a class and a namespace with identical names were exported from a module. It seems like the person who wrote this code knew what they were doing, but it raised some questions for me. Could you shed ...

Apologies, an issue has occurred: Unhandled promise rejection: ReferenceError: localStorage is undefined

I'm currently developing a Single Page Application with Angular/Typescript. The initial page is a Login Page, and upon successful authentication, the following code is used to navigate to a new page: this.router.navigate(['/productionFiles' ...

Having trouble launching the application in NX monorepo due to a reading error of undefined value (specifically trying to read 'projects')

In my NX monorepo, I had a project called grocery-shop that used nestjs as the backend API. Wanting to add a frontend, I introduced React to the project. However, after creating a new project within the monorepo using nx g @nrwl/react:app grocery-shop-weba ...

Can the individual headers of an ag-grid column be accessed in order to apply an on-mouseover event with a specific method?

In my current project, I am utilizing ag-grid to create a dynamic web-application that combines tools from various Excel files into one cohesive platform. One of the Excel features I am currently working on involves displaying a description when hovering ...

Separating React props based on multiple Typescript interfaces

Is there a way to split the props object in React based on an Typescript interface that extends multiple other interfaces? Alternatively, I could duplicate the props and pass them to components that don't need them, but that would not be the most effi ...

Angular Navigation alters the view

I want to navigate to a different page using Angular routing, but for some reason it's not working. Instead of moving to the designated Payment Component page, the content is staying on my Main Component. Why is this happening? app.routing.module.ts ...

Using TypeScript with Node.js: the module is declaring a component locally, but it is not being exported

Within my nodeJS application, I have organized a models and seeders folder. One of the files within this structure is address.model.ts where I have defined the following schema: export {}; const mongoose = require('mongoose'); const addressS ...

How come I am unable to bring in an enum into my Angular 2 component?

In my project, I defined an enum inside the "country-details/enum" folder: export enum ConfigTypes { STAFF, PROD } When trying to import this enum into another component, I encountered a "cannot resolve symbol" error. It's worth mentioning that m ...

An issue has been identified in the node_modules/xterm/typings/xterm.d.ts file at line 10, causing an error with code TS1084. The 'reference' directive syntax used

In my project, I have integrated xterm into Angular5. However, I am encountering an error when trying to run the application. Upon executing ng serve, I am facing the following error: ERROR in node_modules/xterm/typings/xterm.d.ts(10,1): error TS1084: In ...

Interactive pie chart in Highcharts displaying real-time data fluctuations

I need to generate a dynamic pie chart using Highcharts, so I have created the following method: pieData: any = []; getPieData() { this.service.getSales().subscribe(data => { this.sales = data; for (var i = 0; i < this.sales.length; i++){ ...

Leveraging Angular's versatility by utilizing one module for various paths

Question regarding Angular code structure. I am working on implementing a split screen layout where the left and right sections display different data based on various queries. Typically, the content on the right side is determined by what is selected on t ...

Webpack focuses solely on serving HTML files, neglecting to deliver the underlying code

Hey there! I'm currently working on a project that involves using React, TypeScript, and Webpack. I ran into some errors previously that prevented the code from compiling, but now that's fixed. However, when I run webpack, it only serves the HTML ...

Using Angular: Dynamically load an external JavaScript file after the Component View has finished loading

In my Angular 5 application, I am faced with the challenge of loading a JavaScript script file dynamically after my component view has been fully loaded. This script is closely related to my component template, requiring the view to be loaded before it ca ...

When trying to print a PDF on a mobile phone using Angular 2, the window.print() function is not creating the document or allowing it to be

I've encountered an issue while using the window.print() method in Angular 2 to print a receipt (Invoice) window as a PDF. It works perfectly on PC browsers - displaying and allowing downloading of the PDF. However, the problem arises when attempting ...

Creating Dynamic Ionic Slides with Additional Slides Inserted Before and After

Hello, I am currently using ngFor to generate a set of 3 slides with the intention of starting in the middle so that I can smoothly slide left or right from the beginning. When I slide to the right, I can easily detect when the end is reached and add anot ...

Utilize the grouping functionality provided by the Lodash module

I successfully utilized the lodash module to group my data, demonstrated in the code snippet below: export class DtoTransactionCategory { categoryName: String; totalPrice: number; } Using groupBy function: import { groupBy} from 'lodash&apo ...