Angular does not find any custom headers in the HTTP Request Headers

This is a method in my Angular service.

public checkIn(checkInRequest: CheckInRequest): Observable<BookingRoomDetails> {
    let _headers = new HttpHeaders();
    _headers = _headers.append('Content-Type', 'application/json'); 
    let options = {      
      headers: _headers,
      withCredentials: true
    }
    const url = this._constantService.checkIn;
    return this._httpClient.post<BookingRoomDetails>(url, checkInRequest, options);
  }

When I log the header, it shows correctly. However, when checking the Request header in Chrome's Network tab, the custom header is not found.

Is there a way to successfully add custom headers? I am aware that HttpHeaders is immutable, but despite trying, it does not seem to work as expected.

Answer №1

To include the HttpHeaders from @angular/common/http, you can start by importing it in your code.

let header = new HttpHeaders();
header.set('Content-Type', this.contentType);
return this._httpClient.post<BookingRoomDetails>(url, checkInRequest,{headers: header, withCredentials: true});

Alternatively, you could simplify it as follows:

return this._httpClient.post<BookingRoomDetails>(url, checkInRequest,{headers: {'Content-Type', this.contentType}, withCredentials: true});

Answer №2

In order to set your CORS headers for asp.net webApi or your web server, you will need to specify them in either the web.config file or within the .htaccess file.

app.UseCors(builder => builder
        .AllowAnyOrigin()
        .AllowAnyHeader()
        .WithHeaders("YOUR-CUSTOM-HEADER"));

You can also configure it in the web.config file:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Headers" value="YOUR-CUSTOM-HEADER" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

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

The object in the if block may be considered 'null' according to ts-plugin(2531)

I encountered some issues with the code snippet provided above. After examining the event.target, I believe that it should not be nullable within the if statement. const importDatabase = async (event: Event) => { if (event.target) { const file = ( ...

Angular Throws 'Expression Changed After Check' Error When Behavior Subject is Triggered

In my Angular 11 project, I am utilizing a BehaviorSubject to update the toolbar content from various components. The toolbar subscribes to the BehaviorSubject in the following manner: <breadcrumbs [crumbs]="messageService.getBreadcrumbs() | async& ...

Verifying the presence of an object in an array based on its value using TypeScript

Having the following dataset: roles = [ {roleId: "69801", role: "ADMIN"} {roleId: "69806", role: "SUPER_ADMIN"} {roleId: "69805", role: "RB"} {roleId: "69804", role: "PILOTE"} {roleId: "69808", role: "VENDEUR"} {roleId: "69807", role: "SUPER_RB"} ] The o ...

Issues arise when attempting to integrate SystemJs with Windows authentication and TypeScript in Angular 4

Struggling to configure my Angular 4 application to work with windows authentication. It works fine with anonymous authentication, but fails when switched to windows auth. The initial error encountered was: (index):38 Error: Fetch error: 401 Unauthorized ...

PlateJS: Difficulty in inserting images - Screen remains empty when trying to add images using the Image Element

I incorporated the Image Element component using the command npx @udecode/plate-ui@latest add image-element This action added the caption, media-popover, and resizable components to my setup. When referencing Platejs documentation, everything appears as ...

Can you explain the meaning of the code snippet: ` <TFunction extends Function>(target: TFunction) => TFunction | void`?

As I delve into the contents of the lib.d.ts file, one particular section caught my attention: declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void; The syntax in this snippet is a bit perplexing to m ...

The assigned type does not match the type 'IntrinsicAttributes & { children?: ReactNode; }'. This property is not assignable

I have been struggling to resolve this issue, but unfortunately, I have not found a successful solution yet. The error message I am encountering is: Type '{ mailData: mailSendProps; }' is causing an issue as it is not compatible with type &apos ...

Discover the complete guide on incorporating a JavaScript library with additional dependencies in Angular 2

I am a beginner with angular 2 and I am attempting to integrate the Miso Dataset JavaScript library into my angular 2 project. The Miso library requires other JavaScript libraries as dependencies. Although I have included all the necessary JavaScript file ...

The meta title is not visible in the view page source, but it can be found when inspecting the webpage

Struggling to make my meta tags dynamic by integrating angular universal was quite a journey. Despite facing numerous challenges, I managed to successfully incorporate angular universal into my project. Running the project using npm run dev:ssr seemed prom ...

Changing the left border color dynamically based on the value of an object within a loop

My objective is to achieve a design where the left border of the cards appears as shown in the image below: https://i.sstatic.net/nsVeJ.png The loop structure is as follows: <ion-card *ngFor="let office of searchItems" class="custom" ...

Error occurs on Chrome while Angular 7 HTTP POST works fine on Edge and Firefox

My application is experiencing a strange issue where the HTTP POST method works fine on Firefox and Edge browsers, but not on Chrome. The application is built using Angular 7 and .NET Core 2.2. It has a CRUD example that functions correctly in all browser ...

Assigns functions outside of the Angular class to specific keys

import {Injectable, OnDestroy} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs/Observable'; import { catchError, tap } from 'rxjs/operators'; import {environment} ...

What is the best way to trigger a function in the parent component when a child component is clicked

I'm facing a scenario where I have two components - a parent and a child. Within the child component, there is a button. My goal is to trigger a method in the parent component when the user clicks on that button within the child component. Any ideas o ...

Tips for retrieving both the ID and NAME values from Ionic's Dynamic Select Options

In my Ionic 3 project, I have successfully implemented a dynamic select option. However, I am facing an issue where I can only retrieve either the ID or the Name value of the selected option from the server, but not both. I have tried using JSON.parse and ...

Making sure to consistently utilize the service API each time the form control is reset within Angular 4

In the component below, an external API service is called within the ngOnInit function to retrieve an array of gifs stored in this.items. The issue arises when the applyGif function is triggered by a user clicking on an image. This function resets the For ...

The react-bootstrap module does not have any members available for export

I'm looking to incorporate the npm module react-bootstrap from this link into my Layout component, following the ASP.NET Core 2.1 template client project structure. The challenge I'm facing is that the template uses a .js file extension, but I pr ...

Exploring Angular 2: Integrating External Libraries

As a beginner in Angular and Angular 2, I am interested in incorporating an external library into my project. The library can be found at the following link: In order to use this library, I added the following line to my index.html file before angular: & ...

Every time an action is carried out in the app, React generates countless TypeError messages

Whenever I'm using the application (particularly when started with npm start), my console gets flooded with thousands of TypeError messages like this: https://i.sstatic.net/3YZpV.png This issue doesn't occur when I build the app... It's fr ...

Techniques for Grouping an Array of Objects by a Specific Value Key in Angular

I have the following array that needs to be grouped by section_name in HTML. Additionally, I need to first check if the length of the array values for section_name is greater than zero before displaying the results grouped by section_name. I hope my expl ...

I am encountering difficulties in choosing options from the mat-select menu and am unable to display the selected option in the console

Can someone help me with this issue? I have a dropdown list with 2 items and I want the first one to be pre-selected. When either option is selected, I need its value to be displayed in the console and saved in a variable. Here's the code snippet: HT ...