What is the proper way to supply a header parameter in Angular?

Encountering difficulties when trying to pass my header parameter in Angular. The error I'm receiving from my API states "Session Id is required" as shown below. Here is the endpoint:

       [HttpDelete("")]

        public IActionResult EndSession(
            [Required(ErrorMessage = "Session Id is required.")]
            [StringLength(maximumLength: 36, MinimumLength = 36, ErrorMessage  = "Session Id should be 36 characters long.")]
            [FromHeader] string sessionId)

This is how my service method looks like in the angular application:

public async EndSession(sessionId: string): Promise<boolean> {

const headers = new HttpHeaders()
  .set(sessionId , 'string')

this.appSettings = (await this.configService.loadConfig().toPromise());

return this.http.delete<boolean>(this.appSettings.apiSetting.apiAddress + this.apiRoute, { headers })
  .pipe(
    retry(1),
    catchError(this.handleError)
)
  .toPromise()

In the component where I call this method, the sessionId is hardcoded like so:

  export class AppBarHorizontalComponent implements OnInit {
  sessionId = "4CB3C85B-2C11-48AE-8D51-1DC30242A743"
  constructor(private oauthService: OAuthService, private userService: UserSessionService) {  }

public logout(): void {
this.userService.EndSession(this.sessionId);
//this.oauthService.logOut(false);

I expect that the sessionId will be correctly passed as a header parameter, allowing the api method to execute normally.

Answer №1

I identified where I went wrong. Within my service function, I accidentally switched the parameters when specifying the headers. Originally, it was:

const headers = new HttpHeaders()
  .set(sessionId , 'string')

I corrected it to:

const headers = new HttpHeaders()
  .set('sessionId', sessionId)

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

Obtain the selected portion of text value using Angular 2

In order to create a basic text editor that allows users to make selected text bold, follow these steps: Start by setting up a textarea with the value "Super text". Next, select a portion of this text (such as "Super"). But how can you retrieve the selec ...

How should trpc query calls be implemented in a Next.js application for optimal performance?

Transitioning from pure frontend React to Next.js, I am currently working on implementing trpc calls to the backend. While this is a familiar process for me, it seems that the approach I've been using may not be appropriate in this case. const [weight ...

Extracting public data from social media profiles as displayed in Smartr

Is there any pre-existing API or reference material available for achieving this task? I am interested in accessing public social data without the need for users to manually link their accounts to our site. ...

What is the best way to leverage a webbrowser control for design purposes while keeping the functionality in C#?

Observing some apps, it seems they utilize HTML/CSS/Javascript for styling - a much simpler approach compared to crafting the same thing natively. However, these apps have their logic written in C#. Sadly, I am clueless on connecting the two. Research yiel ...

The combination of React Vite and SockJS Client has encountered a failure in all transport

My current project is utilizing react + vite without any proxy configuration. I am attempting to use webstomp-client and sockjs to establish a connection with a websocket server that is supported by Springboot using SockJS. The backend Springboot server w ...

Tips for tracking the evolution of changes to an array within React State

Experiencing challenges with saving the history of updates and modifications on a State. I have an object called "Journey" which includes a list of workshops (another array). Whenever I update my list of workshops, I aim to create a new array that captures ...

Signing in with Angular2 and gapi

I am trying to implement a Google authentication button on my website. Here is the meta tag in the index.html file: <meta name="google-signin-scope" content="profile email"> <meta name="google-signin-client_id" content="xxxxx.apps.googleusercont ...

What is the best way to adjust the output size for ngx-webcam?

I am looking to determine the smallest possible size for an image that is captured. From my testing with ngx-webcam, I have found that I can adjust the minimum height of the output image based on the display height of the webcam. Is there a method to set ...

Model driven forms in Angular 4 do not display validation errors as expected

I'm having trouble getting validation errors to display with the code below. Can anyone provide some assistance? I've set the validators in my component using Form builder. The validation works when I use a single form-group, but it's not w ...

Using setState as a parameter in a personalized hook in React/Next.js while incorporating TypeScript

I encountered an issue with the following code snippet: import { useState, useEffect } from "react"; type Props = { setState: (value: string) => void; }; const useSomeCustomHook = ({ setState }: Props) => { useEffect(() => { se ...

What is the best way to refresh a cached AWS API Gateway endpoint in an ASP.NET Core application?

[Update: After some research, I managed to find a solution to this issue and decided to share it here] I am looking to invalidate the cache for a specific AWS API Gateway endpoint using ASPNETCORE. The documentation mentions sending a signed request. Doe ...

Starting PM2 with multiple instances can be achieved by following these steps

While running my nodejs code with PM2, I encountered a requirement for multiple instances of nodejs executing the same code. To address this need, I created a script named "myscript.sh": cd ~/myproject PM2_HOME='.pm2_1' /usr/local/bin/node /u ...

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

Having trouble asynchronously adding rows using the @angular/material:table schematic. Despite calling this.table.renderRows(), the new rows are not displayed correctly. The "works" part is added to the table, reflecting in the paginator, but the asynchron ...

How can I simulate event data while testing a function that is triggered when an event is emitted from another component in Angular integration testing?

Within component A, there is a function responsible for updating the view based on data emitted from component B. The aim is to simply call this function and pass the data without integrating with component B as it would be too complicated for this particu ...

Display a loading GIF for every HTTP request made in Angular 4

I am a beginner with Angular and I am looking for a way to display a spinner every time an HTTP request is made. My application consists of multiple components: <component-one></component-one> <component-two></component-two> <c ...

The @angular/fire library encountered a FirebaseError stating that the first parameter in the collection() function should be either a CollectionReference, a DocumentReference, or a

I am encountering an error while attempting to access a firestore collection. Despite exploring various solutions on stackoverflow, I have not been able to resolve this issue. The code has been implemented with AngularFire Cloud Firestore document. For mo ...

Sending data from an element within an ngFor loop to a service module

In my component, I have a loop that goes through an array of different areas with unique IDs. When you click the button, it triggers a dialog containing an iframe. This iframe listens for an event and retrieves data as JSON, then sends it via POST to an IN ...

Managing Errors in ASP.NET MVC Areas

I am currently working on an ASP.NET MVC application and I have implemented error handling following a specific tutorial. In the code snippet below located in the FilterConfig.cs: public static void RegisterGlobalFilters(GlobalFilterCollection filters) { ...

Working with Enums in C# Web API by serializing them as strings with spaces

Trying to address a more specific aspect of serializing enumerated types as strings, I have a simple question. Here's an example code snippet to consider: using Newtonsoft.Json; using Newtonsoft.Json.Converters; public enum MyEnum { TypeOne, ...

Error: The service object is unable to bind to ngModel in Angular 5 due to a TypeError, as it cannot read the property 'state' of undefined within Object.eval

Within my service, I have an object declared: public caseDetails = { partyId: '', address: { state: '', city: '', zip: '', street: '' } } I am trying to bind these objects to i ...